CSS 스프라이트를 사용하여 이미지를 반복하거나 반복하지 않는 이미지를 하나만 사용할 수 있는지 궁금합니다. 그래서이 경우 모든 폭과 높이에 상관없이 페이지의 모든 이미지를 결합하고 이미지가 반복되거나 반복되지 않는 이미지로 사용됩니다. 표준은 모든 반복되지 않는 이미지와 모든 반복 이미지를 사용하는 다른 이미지를 사용하여 1 개의 이미지를 만드는 것이다는 것을 알고 있습니다. 그러나 나는 단지 내가 모든 것을 위해 1 개의 이미지를 사용할 수 있는지 알고 싶었다.CSS Sprites 반복 이미지
감사합니다.
짧은 대답은 "아니오"입니다.
반복되는 이미지는 반복되는 방향에 따라 전체적으로 표시됩니다. 따라서 배경이 repeat-x으로 설정되면 모든 이미지 콘텐츠가 가로 방향으로 표시됩니다. 이것이 스프라이트를 사용하여 양방향으로 동시에 반복 할 수없는 이유입니다.
나는 표준이 아닌 모든 반복 이미지와 모든 반복 이미지를 사용하여 다른 이미지를 사용하여 1 개 이미지를 만드는 것입니다 알고있다.
나는 실수라고 생각합니다. 선택적으로 이미지 세그먼트를 바둑판 식으로 배열하는 것은 불가능합니다. 이미지 전체를 바둑판 식으로 배열 할 수 있습니다. 따라서 모든 반복 이미지는 자체 이미지 파일에 있어야합니다.
아니요, 스프라이트를 사용하여 이미지를 반복 할 수 있는지 확실하지 않습니다. 이것은 다음과 같습니다. div { background-image : url (sprite8.png); background-repeat : repeat-y; 너비 : 160px; 패딩 : 20px; 여백 : 20px; float : left; } 예 : http://www.phpied.com/background-repeat-and-css-sprites/ http://spriteme.org/demo.php 당신은, 사실, 이미지를 반복 할 수 있습니다 – fhd
스프라이트를 사용하지만 수평 또는 수직 (배타) 만 사용합니다. 그리고 이미지는 동일한 파일에서 서로 동일한 높이 (수직) 또는 너비 (수평) 여야합니다. –
Ryan이 맞습니다. 반복 이미지를 스프라이트에 묶을 수 있습니다 ... 하나는 repeat-x이고 다른 하나는 fore-repeat-y입니다. 그러나 두 경우 모두 최대 너비와 높이를 각각 알아야합니다. 드물게 저것에 투입하고 싶기 때문에, 나는 수시로 다만 그들의 자신의 분리되는 파일에있는 배경을 반복하는 것을 계속한다. –
@ Ryan Kinal은 자신의 answer에서 배경 이미지 반복 (양방향으로)에 스프라이트 이미지를 사용할 수 없다고 말하면 적합합니다.
이미지가 아닌 하나 또는 두 개의 파일로 크로스 브라우저를 수행하는 방법이 있지만 간단한 것은 아니며 수정하기가 복잡해야합니다 (스프라이트는 수정하기가 복잡하지만 적어도 그것은 시각적입니다!). 의 Stoyan 스테파노 PHPIED 문서에서 언급 한 바와 같이
, 인라인에 의해 재발견 또는 번역 최신 브라우저 및 IE8 + 아래
repeat-x -ing 스프라이트no-repeat -ing 스프라이트당신은 특정 브라우저에 다운로드 5 개 개의 다른 서버에있는 파일 및 4와 끝까지 repeat-y -ing 스프라이트
큰 반복 이미지는 파일 크기가 크게 증가 할 수 있으므로 인코딩하지 않아야하므로 디자인이 다를 수 있습니다.
유감스럽게도 두 가지 종류의 이미지를 동일한 스프라이트에서 사용할 수 없습니다. 일반적으로 반복되는 이미지는 로딩 시간과 크기를 줄이기 위해 반복 될 수있는 큰 이미지 (그라디언트)의 작은 부분입니다. 이미지를 가로, 세로 및 둘 다 반복 할 수 있습니다.
repeat-x, repeat-y 또는 모두 repeat입니다. 스프라이트의 반복되지 않는 이미지의 경우 scroll 60px -20px과 같은 스크롤 좌표를 나타낼 필요가 있습니다 (60px는 왼쪽 좌표이고 -20px는 위쪽 좌표 임).
마지막으로 정답입니다. 상단에 있어야하고 선택해야합니다. OP가이 스레드에서 포기한 죄송합니다. –