두 가지 이미지 스프라이트 기법이 있습니다. "classic"버전은 background 및 background-position CSS 속성을 사용합니다. (여기에서 설명한대로 http://www.alistapart.com/articles/sprites)CSS 스프라이트 기법, CSS 배경 또는 img의 클립
"두 번째"버전은 이미지 태그와 그 클립 CSS 속성을 사용합니다. (http://css-tricks.com/css-sprites-with-inline-images/)
내 질문에 "고전"버전에 비해 "두 번째"버전을 사용하면 장점이 있습니까?
감사와 최고, 빅토르
의 차이는 주로 문서의 의미까지 제공 : 당신은 여전히 사용 장식 및 레이아웃 그래픽 배경, 그리고 단지의 일부 그래픽 이미지 태그를 사용해야합니다 당신의 페이지의 내용.
페이지가 여전히 CSS없이 유용하고 유용해야한다는 것을 기억하십시오. 두 번째 기법을 사용하면 스프라이트를 사용하는 모든 곳에서 스프라이트 맵을 볼 수 있습니다 (클리핑이 발생하지 않음). 혼란스러워!
첫 번째 기법은 스프라이트를 표시하지 않지만 잘못된 것이 아니거나 혼란스럽지 않습니다.
스프라이트 기법이 실제로 유용한 아이콘과 같은 것을 고려할 때 그래픽이 내용인지 장식인지 조금 까다 롭습니다. 개인적으로, 아이콘에 배경 이미지를 사용하는 것이 좋으며, 다른 요소 (링크 또는 단추 컨트롤)에 정보를 추가하는 것이므로 요소 자체가 아닌 요소에 정보를 추가하는 것이 좋습니다.
요약하면 이미지 태그 기반 스프라이트는 깨진 기법입니다. 사용하지 않을 것입니다.
+1 또한 두 번째 방법은 모든 브라우저에서 멋지게 재생하는 것이 훨씬 지루하고 까다 롭습니다. – Aren
이미지에'width = "0"'및'height = "1"'속성을 폴백 값으로 지정하면 CSS를 사용하지 않을 때 클리핑 기술을 배경 기술보다 혼란스럽게 만들 수 없습니다. – vpiTriumph
그런 경우 브라우저가 아무 이유없이 sprite-map을 요청할 것입니다. 사실상 보이지 않기 때문입니다. 또한 반응 형 디자인의 경우 이미지의 너비 및 높이 특성을 아프게 지정하는 것으로 나타났습니다. 예를 들어 이미지를 텍스트 크기와 비례하여 비율을 조정하는 것이 어려워졌습니다. – Beejamin
아이콘이있는 페이지를 인쇄하려면 유스 케이스가 있습니다 (예 : 조직 연락처 카드/전화/skype/etc).
- use separate img elements - use sprite via pseudo(:after) elements with 'content' and 'clip' property
전체 스프라이트가 CSS를 사용할 경우에도 표시되지 않도록 두 번째 방법 (클립)를 사용할 때 너무 img 태그의 크기를 지정하는 것을 잊지 마십시오 : 그래서 당신은 두 가지 옵션이 있습니다. 이 방법의 한 가지 장점은 배경 이미지가있는 경우가 아니라 Windows에서 고 대비 테마를 사용할 때도 클립을 사용하여 이미지가 표시된다는 것입니다. 자세한 내용은
확인이 두 기사 :
http://tjkdesign.com/articles/how-to_use_sprites_with_my_Image_Replacement_technique.asp http://www.artzstudio.com/2010/04/img-sprites-high-contrast/
사용 스프라이트 의사를 통해 (: 후) '내용'과 '클립'속성을 가진 요소
이 메토는 권장하지 않습니다. 디. 작은 이미지 만 표시하려는 경우에는 문제가되지 않을 수 있지만 특히 느린 컴퓨터 (스마트 폰 등)에서 수백 개의 요소 (CSS 의사 요소는 일반적으로 성능에 좋지 않음)에 적용하면 속도가 매우 느립니다.) 또는 IE8과 같은 구형 브라우저.
또한 Soh Tanaka가 묘사 한 '![]()
'의 세 번째 방법이 있습니다. [CSS Sprites w/out with Background Images] (http : //www.sohtanaka.com/web-design/css-sprites-wout-background-images /) –
MikeM