CSS-精灵替代的HTML源

有没有办法在HTML源<img>标签的源设置为从一个更大的图像部分的图像？我知道我可以用CSS这样做：background-position: 0px -76px;但是我怎样才能做到这一点<img>和<input type="image">？CSS-精灵替代的HTML源

编辑：截图从Chrome中：

enter image description here

来源

2012-01-07 Alireza Noori

设置<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/

来源

2012-01-07 23:14:45

谢谢。但是这里有一个小问题，我有一个像[这个问题]中的问题（http://stackoverflow.com/questions/4108983/input-type-image-shows-unwanted-border-in-chrome-and-破碎的链接功能于IE7）。我想用图像类型的提交按钮创建一个搜索框。当我设置'src =“”'时，边框将会在IE和Chrome中显示（不是FF）。在同一类型中，我想将所有图像放在一个大图像中并使用偏移量。我该怎么办？ – 2012-01-07 23:23:52

你不应该使用''，它实际上是为另一个目的而设计的（比如图像地图，其中点击的坐标具有重要性）。改用CSS来设计一个'

我实际上使用CSS sprites。我只是不知道名称：D谢谢。我会改变我的问题的标题。我使用了'border：0'（或'none'）。如果'src =“”'，它将不起作用。 – 2012-01-07 23:31:55

简单地说你不能，除非你缩放图像向上或向下。

使用的外跨度overflow:hidden并设置所述图像的大小。

喜欢的东西

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

把图像这里面span

来源

2012-01-07 23:15:10

你可能必须包装在一个<div>比的<img>小，然后设置与top:y;或偏移图像margin-top: y;

来源

2012-01-07 23:15:41 pixelass

CSS-精灵替代的HTML源

回答

相关问题