我们从 sprite 获取的图像可否调整大小,我的意思是像这样:
background: url(../images/sprite.png) no-repeat -1px -1170px;
display: block;
height: 14px;
width: 14px;
从精灵图中更改宽度和高度是否可能?例如,如果我在精灵图中有一个尺寸为40x40像素的铅笔图标,但是我想将其显示为20x20像素。
提前感谢。
另一种解决方案是使用css3的zoom: .5;
属性。
background-size
属性:background-size: 50% 50%;
修改 background-size
将会导致您每次需要重新验证容器的 width
和 height
。
使用 zoom
时,您将无法在 Firefox 上获得支持。
...
另一个选项是使用:
transform: scale(.5); /* 50% smaller */
transform: scale(1.5); /* 50% bigger */
2018解决方案:
假设我们有一个5X4的网格精灵。
第一步是将背景图像的大小相对于容器固定。
.sprite{ background-size: 500% 400%; }
background-position: calc( var(--colum) * 100% / 5 - 1) calc(var(--row) * 100% / 4 - 1);
.figure1{ --row:1, --column:0 }
.figure2{ --row:1, --column:1 }
// etc...
.sprite{
background-size: 500% 400%;
background-position: calc( var(--colum) * 100% / 4) calc(var(--row) * 100% / 3);
}
.figure1{ --row:0, --column:0 }
.figure2{ --row:0, --column:1 }
.figure3{ --row:0, --column:2 }
.figure4{ --row:0, --column:3 }
.figure5{ --row:1, --column:0 }
// etc...
使用 transform 只会改变图像的缩放而不是大小。为了将精灵图像的大小从 40px x 40px 更改为 20px x 20px,您需要将精灵图像的大小更改为 20px x 20px,然后调整背景大小以适应该区域中的图像精灵。此外,您还需要调整背景位置以显示正确的精灵部分。
#home {
width: 46px;
height: 44px;
background: url(https://www.w3schools.com/css/img_navsprites.gif) 0 0;
}
#next {
width: 43px;
height: 44px;
background: url(https://www.w3schools.com/css/img_navsprites.gif) -91px 0;
}
#resizedHome {
width: 20px;
height: 20px;
background: url(https://www.w3schools.com/css/img_navsprites.gif) 0 0;
background-size: 306%;
}
#resizedNext {
width: 20px;
height: 20px;
background: url(https://www.w3schools.com/css/img_navsprites.gif) -102px 0;
background-size: 306%;
}
<h5>
Original Sprite Image
</h5>
<img id="home" ><br><br>
<img id="next" >
<br><br>
<h5>
Resized Sprite Image
</h5>
<img id="resizedHome" ><br><br>
<img id="resizedNext" >
或者
background-size
是你要找的。
#example1 {
background-size: 40px 40px;
}
#example2 {
background-size: 20px 20px;
}