CSS 스프라이트 내에서 자른 이미지의 크기를 어떻게 조정할 수 있나요?

CSS 스프라이트에서 잘린 이미지 크기 조정

"CSS 스프라이트: 웹 성능 향상을 위한 기술"이라는 제목의 기사에서는 더 큰 이미지. 이 기사에서는 자르기뿐 아니라 자른 영역을 레이아웃에 배치하기 전에 크기를 조정할 수도 있는 가능성을 살펴봅니다.

기사에서 설명했듯이 CSS 코드 스니펫의 예는 다음과 같습니다.

A {
  background-image: url(spriteme1.png);
  background-position: -10px -56px;
}

스프라이트에서 추출한 후 자른 이미지의 크기를 조정하려면 background-size 속성을 사용할 수 있습니다. 이 속성은 대부분의 주요 브라우저에서 지원되지만 전부는 아닙니다. 예를 들어, 자른 이미지의 크기를 원래 크기의 150%로 조정하려면 다음 스타일 규칙을 사용할 수 있습니다.

background-size: 150% 150%;

잘린 이미지의 크기를 조정하는 또 다른 접근 방식은 확대/축소와 변환을 조합하여 활용하는 것입니다. 스케일 속성. 이 방법은 데스크탑과 모바일 장치 모두에 대한 크로스 브라우저 지원을 제공합니다. 예를 들면 다음과 같습니다.

[class^="icon-"] {
  display: inline-block;
  background: url('../img/icons/icons.png') no-repeat;
  width: 64px;
  height: 51px;
  overflow: hidden;
  zoom: 0.5;
  /* Mozilla support */
  -moz-transform: scale(0.5);
  -moz-transform-origin: 0 0;
}

.icon-big {
  zoom: 0.60;
  /* Mozilla support */
  -moz-transform: scale(0.60);
  -moz-transform-origin: 0 0;
}

.icon-small {
  zoom: 0.29;
  /* Mozilla support */
  -moz-transform: scale(0.29);
  -moz-transform-origin: 0 0;
}

이러한 기술을 사용하면 CSS 스프라이트에서 더 작은 이미지를 자르고 크기를 조정할 수 있으므로 웹페이지 레이아웃 작업 시 유연성과 사용자 정의가 더욱 향상됩니다.

위 내용은 CSS 스프라이트 내에서 자른 이미지의 크기를 어떻게 조정할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!