高分辨率CSS sprites [英] high resolution CSS sprites

问题描述

我正在生成CSS sprites。我想使用这些精灵在多种大小。我已经搜索，但没有能够弄清楚如何功能缩放CSS sprite - 例如。如果原来的sprite是在150x150，我想显示它在50x50，我怎么能这样做？ background-size 似乎打破了它。

我可以只生成所需大小的精灵，通过ImageMagick的 -resize 这样做我采取明显的分辨率命中。通常，如果我发现图片在网页上的分辨率不可接受，我只是做一个更大的图片并扩大其大小，功能上增加图片的分辨率。

我不知道如何缩放CSS sprite，我有点卡住了 - 我怎么能使用CSS sprite实现任意分辨率？

解决方案

最简单的方法是使用CSS3 background-size ，但这不是所有浏览器都支持的（例如IE <= 8 ）。您可以查看可以使用的IE特定的转换或过滤器，然后添加 -mz - ， -webkit - 和 -o - 选择器，以在您要定位的浏览器上获得所需的效果。

pre> < 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; / *从600px缩小* / 
 height：100px; / *从400像素缩小* / 
} 
  

>

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

I'm generating CSS sprites. I want to use these sprites at multiple sizes. I've searched but haven't been able to figure out how to functionally scale a CSS sprite--e.g. if the original sprite is at 150x150 and I want to display it at 50x50, how can I do that? background-size seems to break it.

I can just generate the sprites at the needed sizes, but when I do this via ImageMagick's -resize I take a noticeable resolution hit. Usually, if I find an image is unacceptably low resolution on a webpage, I just make a bigger image and scale its size, functionally increasing the resolution of the image.

Since I can't figure out how to scale a CSS sprite, I'm a bit stuck--how can I achieve arbitrary resolution using a CSS sprite?

解决方案

The most elegant way you can do this is by using CSS3 background-size, but this is not supported on all browsers (e.g. IE<=8). You might look into IE specific transforms or filters that you can use and then add the -mz-, -webkit-, and -o- selectors to get the effect you want on the browsers you are targeting.

The least elegant way to do this is by faking the sprite scale and positioning.

The HTML

<div class="ex3">
    <img src="http://www.placekitten.com/g/600/400"/>
</div>

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

The Fiddle

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

这篇关于高分辨率CSS sprites的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！