Question

我没有及时了解最新的CSS改进，所以我觉得值得一提;

<img>元素很好地写成<img src="/url.png" />，其高度和宽度是自动或指定的。我喜欢CSS sprites，因为它们具有明显的加载速度优势，但却讨厌为它写出所有CSS。是否存在或将来会有<img src="/url.png" Xpx Ypx />这样的语法，其中X / Y表示类似于CSS background-position的位置偏移？

据我所知，它在图像尺寸方面会有些不稳定，因为它们在HTML中缩放（与裁剪相反，就像带有背景图像的div一样）。

这可能吗，还是我只是懒惰？

Answer 1

无法想象永远都会过去，即使它确实存在多年来通常的跨浏览器问题。有许多服务可以为您设计CSS /坐标 - 例如SpriteCow

Answer 2

目前在HTML中没有任何内容。

如果你有1像素的透明gif或png，你可以在图片标签上使用内联CSS：

<img style="background: url(/url.png) -Xpx -Ypx;" src="/1pix.gif" />

但是你需要设置图像元素的宽度和高度，以便精灵背景可见。

您可以将透明图像文件直接包含在<img>标记中作为数据网址来避免使用透明图像文件：

8位PNG

<img style="background: url(/url.png) -Xpx -Ypx;" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAMAAAAoyzS7AAAABlBMVEX///8AAABVwtN%2BAAAAAXRS%0ATlMAQObYZgAAAApJREFUCB1jYAAAAAIAAc/INeUAAAAASUVORK5CYII%3D%0A">

GIF（较小）

<img style="background: url(/url.png) -Xpx -Ypx;" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw%3D%3D%0A">

（见http://jsfiddle.net/r727j/1/）

但显然我们在这里进入了相当丑陋的领域。（而且我不能发誓数据URL在IE 6中可以正常工作。）

Answer 3

精灵本身通常用于将许多小图像组合成一个大图像。这不仅可以节省宝贵的加载时间和带宽，还可以保持站点结构的清洁和可管理性。

例如

{background-position:0px -143px;} /* what ever*/

HTML中是否存在（或将存在）图像spriting语法？

3 个答案:

8位PNG

GIF（较小）