Html 使用带有 IMG 标签的精灵？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4335957/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Using sprites with IMG tag?
提问by Ryan Peters
I understand how to use sprites, however, isn't a "src" attribute required for IMG tags? I could always use a SPAN or other tag and set the background/width/etc but it won't be semantically correct.
我了解如何使用精灵，但是，IMG 标签不需要“src”属性吗？我总是可以使用 SPAN 或其他标签并设置背景/宽度/等，但它在语义上是不正确的。
Basically, I'd like to omit the SRC for an IMG tag and use just sprites, but am concerned about the HTML not being technically valid because of it. Thanks.
基本上，我想省略 IMG 标签的 SRC 并只使用精灵，但我担心 HTML 不是技术上有效的，因为它。谢谢。
采纳答案by kapa
About semantical correctness:
关于语义正确性：
When an image has semantical meaning,so it is considered to be content, use an IMG tag, without sprites, and a correctly set up ALT.
当图像具有语义意义，因此被认为是内容时，请使用 IMG 标签，不带精灵，并正确设置 ALT。
When an image is just decoration,like the background of a box, background of a button, background of a menu option, etc., it has no semantical meaning, so you can just use it as a backgroundof a SPAN, DIV, etc. from CSS. You can use sprites in this case.
当图像只是装饰时，如框的背景、按钮的背景、菜单选项的背景等，它没有语义意义，因此您可以将其用作SPAN、DIV 等的背景. 来自 CSS。在这种情况下，您可以使用精灵。
回答by wdev
Using sprites doesn't necessarily mean you need to define them in css backgrounds. You can also use IMG tag sprites, to do so you need basically trim your image. There are two good articles explaining that technique:
使用精灵并不一定意味着您需要在 css 背景中定义它们。您还可以使用 IMG 标签精灵，为此您需要基本上修剪您的图像。有两篇很好的文章解释了该技术：
http://tjkdesign.com/articles/how-to_use_sprites_with_my_Image_Replacement_technique.asp
http://tjkdesign.com/articles/how-to_use_sprites_with_my_Image_Replacement_technique.asp
http://www.artzstudio.com/2010/04/img-sprites-high-contrast/
http://www.artzstudio.com/2010/04/img-sprites-high-contrast/
Both CSS and IMG methods sure have their own benefits, so you need to figure out which one suits you better.
CSS 和 IMG 方法肯定都有自己的好处，所以你需要弄清楚哪一种更适合你。
回答by Faisal Debouni
I use a 1x1 transparent gif (so called spacer) for the src. then set the background image for that img tag with the corresponding bg position. this way you're utilizing the speed of sprites and keeping the semantic of your code (you can still use the alt attribute)
我使用 1x1 透明 gif（所谓的间隔）作为 src。然后使用相应的 bg 位置设置该 img 标签的背景图像。这样您就可以利用精灵的速度并保持代码的语义（您仍然可以使用 alt 属性）
回答by Richard Key
I could always use a SPAN or other tag and set the background/width/etc but it won't be semantically correct
我总是可以使用 SPAN 或其他标签并设置背景/宽度/等，但它在语义上是不正确的
Actually there is nothing wrong about using CSS to set the background of a span or div. It would actually be incorrect syntactically to omit the src from an image, as that is the whole point of the tag. There is nothing in the standards saying you have to put text inside a span. Syntactically speaking, modifying the background on an element would be the most "correct" way to do it.
实际上，使用 CSS 设置 span 或 div 的背景并没有错。从图像中省略 src 在语法上实际上是不正确的，因为这是标签的全部意义。标准中没有任何内容说您必须将文本放入跨度内。从语法上讲，修改元素的背景将是最“正确”的方法。
Here is the ref on img tags over at W3C: http://www.w3.org/TR/html401/struct/objects.html#h-13.2
这是 W3C 上 img 标签的参考：http: //www.w3.org/TR/html401/struct/objects.html#h-13.2
And a little extra reading: http://www.w3.org/TR/html4/struct/global.html#h-7.5.3
还有一点额外的阅读：http: //www.w3.org/TR/html4/struct/global.html#h-7.5.3
These elements define content to be inline (SPAN) or block-level (DIV) but impose no other presentational idioms on the content. Thus, authors may use these elements in conjunction with style sheets, the lang attribute, etc., to tailor HTML to their own needs and tastes.
这些元素将内容定义为内联 (SPAN) 或块级 (DIV)，但不会对内容施加其他表现形式。因此，作者可以将这些元素与样式表、lang 属性等结合使用，以根据自己的需要和品味定制 HTML。
回答by Phrogz
You can either use CSS backgrounds, or HTML Canvaselements to dynamically draw upon. With canvas's you have the ability to easily subset images and perform blend mode effects.
您可以使用 CSS 背景或HTML Canvas元素来动态绘制。使用画布，您可以轻松地对图像进行子集化并执行混合模式效果。
回答by Paul
You solve this by re-thinking your options.
你通过重新思考你的选择来解决这个问题。
You create a defined area with a <a>with display:block;or <div>and use overflow hidden;to hide overflow and position:relative;.
您可以使用<a>withdisplay:block;或<div>和用于overflow hidden;隐藏溢出和 来创建定义的区域position:relative;。
Then you place your <img>image sprite inside absolutely positioned, which is possible since you positioned the parent.
然后将<img>图像精灵放置在绝对定位内，这是可能的，因为您定位了父级。
Then use :hoveron the image to change position.
然后:hover在图像上使用来改变位置。
Now your sprite is based on an img tag, so you can use your alttext.
现在您的精灵基于 img 标签，因此您可以使用您的alt文本。
Following example is based on a Facebook sprite with two versions of the icon on top of each other, each 50px by 50px, total height of image being 100px:
以下示例基于 Facebook 精灵，其中两个版本的图标相互重叠，每个版本 50 像素 x 50 像素，图像总高度为 100 像素：
<!DOCTYPE html>
<html>
<head>
<style>
.icon {
display:block;
position:relative;
width:50px;
height:50px;
border:1px solid red;
overflow:hidden;
}
#fb {
position:absolute;
top:0;
left:0;
}
#fb:hover {
position:absolute;
top:-50px;
left:0;
}
</style>
</head>
<body>
<a href="https://facebook.com" class="icon" title="Facebook">
<img src="sprite-facebook.png" id="fb" width="50" height="100" alt="Facebook">
</a>
</body>
</html>
