바로 지금 표시되는 Google 홈페이지를보십시오. 아래 스크린 샷이 제공됩니다.현재 Google 홈페이지 - 단일 이미지 대신 CSS 스프라이트가 사용되는 이유는 무엇입니까?
대신 하나의 이미지로 이것을 사용하는 구글은 CSS 스프라이트를 사용했다. 스프라이트 화상
은 (치수 변화) 아래에 제공된다 : CSS 스프라이트 단일 이미지 대신에 사용 된 이유
문제는? 단일 이미지가 사용 된 경우 HTTP 요청 수가이 CSS 스프라이트의 경우와 같지 않습니까?
단일 이미지는 다른 영역에서 (다른) 호버 효과를 허용하지 않습니다.
또는 각 애니메이션마다 동일한 크기의 이미지를로드해야합니다. 스프라이트를 사용하면 이미지를 한 번로드하면 모든 애니메이션이 해당 데이터로 실행됩니다.
그래서 CSS 스프라이트의 다른 점에 호버 효과를 사용할 수 있습니까? –
기본적으로 스프라이트의 다른 부분을 사용하여 이미지를 구성합니다. Google 예제에서 일반적인 배경을보고 오버레이에서 많은 작은 이미지를 볼 수 있습니다. 이제 호버 효과는 사용하는 스프라이트의 영역을 변경하는 것으로 이어집니다. – Sirko
CSS 스프라이트는 사이트에서 참조한 image 리소스에 대해 수행 된 HTTP 요청의 수를 줄이는 방법입니다. 이미지는 정의 된 X 및 Y 좌표에서 하나의 큰 이미지으로 결합됩니다.
이 생성 된 이미지를 관련 페이지 요소에 할당하면 background-position CSS 속성을 사용하여 보이는 영역을 필요한 구성 요소 이미지로 옮길 수 있습니다.
Google 홈페이지와 마찬가지로 스프라이트는 다른 페이지가 없으므로 염두에두고 사용되었습니다. –
@IstiaqueAhmed 다른 페이지 의미 .. ?? 만약 내가 네가 네 말이 맞다면 이해가된다. 하나의 페이지에 500 개의 아이콘이 표시되고 하나의 이미지에 500 개의 아이콘을 사용한다면 브라우저는 500 개의 요청을 보낸다. –
Sirko가 말한 것을 고려하지 않는 한 Google 홈페이지에 단 하나의 이미지 만 사용할 수 있습니다. 맞습니까? –
"이미지"의 일부분이 변경 될 수 있습니다. 그래서 큰 이미지는 많은 작은 이미지로 만들어집니다. –