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">

...然后使用.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

您可能需要将其包裹在小于<div>的{​​{1}}中，然后使用<img>或top:y;