HTML – 高分辨率CSS精灵

概述我正在生成CSS精灵.我想以多种尺寸使用这些精灵.我已经搜索过但无法弄清楚如何在功能上扩展CSS精灵 – 例如.如果原始精灵是150×150并且我想以50×50显示它,我该怎么办呢？背景大小似乎打破了它. 我可以生成所需尺寸的精灵,但是当我通过ImageMagick的-resize执行此 *** 作时,我会获得明显的分辨率.通常情况下,如果我发现网页上的图像分辨率低得令人无法接受,我只需制作更大的图像并缩 我正在生成CSS精灵.我想以多种尺寸使用这些精灵.我已经搜索过但无法弄清楚如何在功能上扩展CSS精灵 – 例如.如果原始精灵是150×150并且我想以50×50显示它,我该怎么办呢？背景大小似乎打破了它.

我可以生成所需尺寸的精灵,但是当我通过ImageMagick的-resize执行此 *** 作时,我会获得明显的分辨率.通常情况下,如果我发现网页上的图像分辨率低得令人无法接受,我只需制作更大的图像并缩放其大小,从功能上提高图像的分辨率.

由于我无法弄清楚如何缩放CSS精灵,我有点卡住了 – 如何使用CSS精灵实现任意分辨率？

解决方法 最优雅的方法是使用 CSS3 background-size,但并不是所有浏览器都支持(例如IE< = 8).您可以查看可以使用的特定于IE的转换或过滤器,然后添加-mz-,- webkit-和-o-选择器,以在您要定位的浏览器上获得所需的效果. 最不优雅的方法是伪造精灵比例和定位. HTML

<div >    <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 */}

小提琴

http://jsfiddle.net/brettwp/s2dfT/

总结

以上是内存溢出为你收集整理的HTML – 高分辨率CSS精灵全部内容，希望文章能够帮你解决HTML – 高分辨率CSS精灵所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。