<img>元素中的背景图片

Question

有人可以帮助我找到我的问题吗？ 我有一个<img />，我想在一个<a>标签中为它设置背景图片。

这是我的例子：

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

背景颜色不起作用了.. :-( 我的示例是一个JavaScript字符串，这就是我转义URL的原因

谢谢帮助 :-)

- Patrik

---

为什么要转义引号？你确定 URL 前面的 . 是正确的吗？ - Pekka

除非我非常困惑，否则为什么要调整img标签的背景而不使用其SRC属性呢？而且URL中的前导"./"只是一个相对路径，我想。 - Ross

为什么不使用src属性？为什么需要使用background-image？ - jerjer

你需要在括号关闭后转义引号 ^^ - Thomas Decaux

阅读完问题和答案后，我脑海中浮现一个有趣的想法：你被解雇了！ - Milche Patern

Answer 1

你甚至不需要引号。

background:url(./images/system/button/close/close.png)

如果可以的话，使用div标签

<div style="height:20px; width:20px; padding:9px; background:url(./images/system/button/close/close.png) no-repeat red"></div>

- Rocket Ronnie

---

请注意，div元素默认情况下显示为块级元素，而图像则是内联元素。 - jerjer

值得注意的是，你的背景颜色不起作用，因为你在后面覆盖了它。要么使用 background: red url(...)，要么使用 background-image。 - Joeri Hendrickx

如果元素的目的是显示图像，那使用图像元素更具语义意义，为什么要使用div呢？ - Joshua Bambrick

Answer 2

您正在转义引号，并且已经颠倒了第二个引号和括号。

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 */

正如Ross在评论中指出的那样，你缺少src属性。我想如果在具有半透明背景的图像上设置背景图片将起作用，但是如果你没有内容图像，请不要使用<img>元素（并且不要隐藏任何你在background-image属性中拥有的内容图像）。

- Quentin

---

哪个元素有资格在<a>标签内使用带背景的图片？ - Patrik

Answer 3

不明白为什么要转义引号。

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

这个可行吗？

你确定URL中的点号没问题吗？

- Jack Franklin

---

因为它是一个 JavaScript 字符串。 - Patrik

Answer 4

background-color:red;正在被background:所取代。

合并你的背景。然后通过删除背景中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" />

最后，如果需要有一个alt属性，其内容将显示，因为没有源。如果添加了alt，请使用透明图像。

- chaiboy

Answer 5

嗯，即使使用<img/>标签有点奇怪。（它不是它的目的，应该使用src或带有背景的div...）

这里, 它可以工作

- Shikiryu