如何在 CSS Sprite 中缩放图像
在 CSS Sprite 的上下文中,从较大的图像中裁剪较小的图像以实现为了高效显示,通常需要缩放裁剪区域。本文提供了解决此挑战的解决方案。
您可以使用各种方法在 CSS 精灵中实现图像缩放。
使用背景大小(推荐):
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; -moz-transform: scale(0.5); -moz-transform-origin: 0 0; } .icon-big { zoom: 0.60; -moz-transform: scale(0.60); -moz-transform-origin: 0 0; } .icon-small { zoom: 0.29; -moz-transform: scale(0.29); -moz-transform-origin: 0 0; }
此方法使用缩放Webkit/Blink/IE浏览器和transform:scale for Mozilla(-moz-)和老Opera(-o-)浏览器实现跨浏览器兼容性。
注意:实施解决方案时考虑浏览器支持非常重要。在生产中使用这些技术之前,请务必检查浏览器兼容性。
以上是如何在 CSS Sprite 中缩放图像?的详细内容。更多信息请关注PHP中文网其他相关文章!