Html <img> 元素中的背景图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3967344/
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
Background-Image in <img> element
提问by Patrik
Can someone help me to find my Problem ?
I have a <img />and will give him a background-image within a <a>tag.
有人可以帮我找到我的问题吗？我有一个<img />并且会给他一个<a>标签内的背景图像。
Here is my example:
这是我的例子：
<img border="0" style="display:block; width:20px; height:20px; background-color:red; padding:9px; background:url(\'./images/system/button/close/close.png)\' no-repeat" />
Background-Color didn't work to.. :-( My Example is a JavaScript String, thats the reason why I'm escaping the URL
背景颜色不起作用.. :-( 我的例子是一个 JavaScript 字符串，这就是我转义 URL 的原因
Thank's for help :-)
感谢帮助 ：-）
回答by Rocket Ronnie
you dont even need the quote marks.
你甚至不需要引号。
background:url(./images/system/button/close/close.png)
use a div if you can
如果可以，请使用 div
<div style="height:20px; width:20px; padding:9px; background:url(./images/system/button/close/close.png) no-repeat red"></div>
回答by Quentin
You are escaping your quote marks and have transposed the second quote mark and bracket.
您正在逃避您的引号并已调换第二个引号和括号。
In CSS:
在 CSS 中：
url('foo') /* is technically fine but broken on IE/Mac */
url(foo) /* is fine */
url('foo)' /* is not fine */
url(\'foo\') /* is not fine */
And as Ross points out in a comment, your srcattribute is missing. I imagine that setting a background-image on an image with a translucent background will work, but if you don't have a content image, don't use an <img>element (and don't hide any content images you do have in in background-imageproperties).
正如罗斯在评论中指出的那样，您的src属性缺失。我想在具有半透明背景的图像上设置背景图像会起作用，但是如果您没有内容图像，请不要使用<img>元素（并且不要隐藏您在background-image属性中拥有的任何内容图像）。
回答by Hyman Franklin
Don't understand why you are escaping the quotes.
不明白为什么要转义引号。
<img border="0" style="display:block; width:20px; height:20px; background-color:red; padding:9px; background:url('./images/system/button/close/close.png') no-repeat" />
Does that work?
那样有用吗？
And are you sure about the . in the URL?
你确定 . 在网址中？
回答by chaiboy
background-color:red;is being superseded by background:.
background-color:red;正在被 取代background:。
Combine your backgrounds. You can then refine it further by removing the quotes in the URL() of the background and the period from the URL. if it is relative to the location of the page it is on just remove the backslash.
结合你的背景。然后，您可以通过删除背景的 URL() 中的引号和 URL 中的句点来进一步优化它。如果它是相对于它所在页面的位置，只需删除反斜杠。
<img border="0" style="display:block; width:20px; height:20px; padding:9px; background:#F00 url(images/system/button/close/close.png) no-repeat" />
<img border="0" style="display:block; width:20px; height:20px; padding:9px; background:#F00 url(images/system/button/close/close.png) no-repeat" />
Last if you need to have an altattribute its contents will show up since there is no source. Use a transparent image if you add the alt.
最后，如果你需要一个alt属性，它的内容会显示出来，因为没有来源。如果添加alt.
