我正在生成 CSS Sprite 。我想以多种尺寸使用这些 Sprite 。我已经搜索过但无法弄清楚如何在功能上缩放 CSS Sprite ——例如如果原始 Sprite 是 150x150 而我想以 50x50 显示它,我该怎么做? background-size
似乎打破了它。
我可以只生成所需大小的 Sprite ,但是当我通过 ImageMagick 的 -resize
执行此操作时,我的分辨率明显下降。通常,如果我发现网页上的图像分辨率低得令人无法接受,我只会制作一个更大的图像并缩放其大小,从功能上提高图像的分辨率。
由于我不知道如何缩放 CSS Sprite ,我有点卡住了——如何使用 CSS Sprite 实现任意分辨率?
最佳答案
最优雅的方法是使用 CSS3 background-size
,但并非所有浏览器都支持(例如 IE<=8)。您可能会查看可以使用的 IE 特定转换或过滤器,然后添加 -mz-
、-webkit-
和 -o-
选择器在您的目标浏览器上获得您想要的效果。
最不优雅的方法是伪造 Sprite 比例和定位。
HTML
<div class="ex3">
<img src="http://www.placekitten.com/g/600/400"/>
</div>
CSS
.ex3 {
position: relative;
overflow: hidden;
width: 50px;
height: 50px;
}
.ex3 img {
position: absolute;
top: -25px;
left: -25px;
width: 150px; /* Scaled down from 600px */
height: 100px; /* Scaled down from 400px */
}
fiddle
关于html - 高分辨率 CSS Sprite ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8947132/