CSS-sprites在html源代码中的替代方案

Question

有没有办法将HTML源中的<img>标记的源设置为来自较大图像的部分图像？我知道我可以用CSS做这件事，比如：background-position: 0px -76px;，但是我如何在<img>和<input type="image">中做这件事呢？

编辑:Chrome截图：

​

​

Answer 1

是否将<img src设置为较大图像中的部分图像？没有办法。

您已经有了答案:使用background CSS属性并将其定位到所需的坐标。注意:您可以将背景图像分配给<img>标记，如果这对您有所帮助的话。

为了方便起见，另一种解决方案是:您可以使用包含坐标和大小的查询字符串附加图像：

<img src="/my_image.jpg?x=400&y=220&width=200&height=120">

...then使用.htaccess将此请求发送到服务器端脚本，该脚本处理图像并输出部分图像(但这完全是另一回事)。

如果你选择实现.htaccess，这篇文章可能会对你有所帮助：

• RewriteRule for image file requests only if a query string is present

听起来你真的想要使用CSS精灵，有很多关于这方面的教程，这里有一个：

• http://css-tricks.com/css-sprites/

Answer 2

简单地说，除非你缩小或放大图像，否则你不能。

在overflow:hidden中使用外部跨度，并在其上设置图像的大小。

就像这样

span.thumb
{  
width:120px;
height:70px;
overflow: hidden;
}

将图像放入此span中

Answer 3

您可能需要将其包装在比<img>小的<div>中，然后使用top:y;或margin-top: y;设置图像的偏移量