我不了解最新的 CSS 改进，所以我认为值得一问；
一个<img>元素很好地写为<img src="/url.png" />，高度和宽度自动或指定。我喜欢 CSS sprite 的明显加载速度优势，但讨厌为它写出所有的 CSS。是否存在或将存在类似 的语法<img src="/url.png" Xpx Ypx />，其中 X/Y 表示类似于 CSS 的位置偏移background-position？
我知道图像尺寸会很不稳定，因为它们会在 HTML 中缩放（而不是裁剪，就像带有背景图像的 div 那样）。
这可能吗，还是我只是懒惰？
无法想象这会成为现实，即使它发生了，你也会多年来一直遇到常见的跨浏览器问题。有许多服务可以为您计算 CSS/坐标 - 例如SpriteCow。
目前在 HTML 中没有这样的东西。
如果你有一个 1 像素的透明 gif 或 png 方便，你可以在图像标签上使用内联 CSS：
<img style="background: url(/url.png) -Xpx -Ypx;" src="/1pix.gif" />
但是您需要设置图像元素的宽度和高度，以便精灵背景可见。
<img>您可以通过将其作为数据 URL直接包含在标签中来避免对透明图像文件的需求：
<img style="background: url(/url.png) -Xpx -Ypx;" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAMAAAAoyzS7AAAABlBMVEX///8AAABVwtN%2BAAAAAXRS%0ATlMAQObYZgAAAApJREFUCB1jYAAAAAIAAc/INeUAAAAASUVORK5CYII%3D%0A">
<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 中工作。）
sprite 本身通常用于将许多小图像组合成一张大图像。这样做不仅可以节省宝贵的加载时间和带宽，还可以使您的网站结构保持整洁和易于管理。
例子
{background-position:0px -143px;} /* what ever*/