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

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

CSS 스프라이트에서는 큰 이미지에서 작은 이미지를 자르는 것이 일반적인 기술입니다. 하지만 잘린 부분의 크기를 조정하고 싶다면 어떻게 해야 할까요? CSS 스프라이트에서 이미지 크기를 조정하는 방법은 다음과 같습니다.

배경 크기

대부분의 브라우저가 배경 크기를 지원하는 경우 다음을 사용할 수 있습니다.

background-size : 150% 150%;

확대/축소 및 Transform:scale

크로스 브라우저 호환성을 위해 Zoom과Transform:Scale:

[class^="icon-"]{
    zoom:0.5;
    -moz-transform:scale(0.5);
}

.icon-big{
    zoom:0.60;
    -moz-transform:scale(0.60);
}

.icon-small{
    zoom:0.29;
    -moz-transform:scale(0.29);
}

.Zoom:

의 조합 사용을 고려하세요.

• Webkit/Blink/IE에서 지원
• 다음에 따라 확장 기본 확대/축소 설정

Transform:scale:

• Mozilla, 이전 Opera에서 지원
• 기본 확대/축소 설정과 독립적으로 확장

이 접근 방식을 사용하면 자른 이미지를 쉽게 축소하거나 확대할 수 있습니다. 스프라이트. 예를 들어 제공된 예에서 "Item1, 2, 3, 4" 옆에 있는 아이콘의 크기를 줄이려면 scale()을 늘리면 됩니다. 필요에 따라 확대/축소 또는 배율 값을 조정할 수도 있습니다.

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