CSS 스프라이트 내에서 자른 이미지의 크기를 조정하려면 어떻게 해야 합니까?

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

"페이지 성능을 향상하기 위해 CSS 스프라이트 만들기" 기사에서는 다음 방법을 설명합니다. 큰 이미지에서 작은 이미지를 자릅니다. 그러나 디자인에 통합하기 전에 자른 이미지의 크기를 조정해야 하는 시나리오가 발생할 수 있습니다. 이는 다양한 기술을 사용하여 달성할 수 있습니다.

배경 크기 방법(IE9, 최신 브라우저)

배경 크기 속성을 사용하여 원하는 크기 조정 자른 이미지. 예를 들어 이미지 크기를 두 배로 늘리려면 150% 150% 값을 사용하세요.

background-size: 150% 150%;

확대/변환 크기 조정

크로스 브라우저 호환성을 위해 , WebKit/Blink/IE 브라우저의 확대/축소를 Mozilla 및 이전 Opera의 변환:규모와 결합합니다. 브라우저.

[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 스프라이트 내에서 자른 이미지의 크기를 조정하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!