如何使图像超链接具有背景图像？答案

【问题标题】：How do I make image hyperlinks have a background image?如何使图像超链接具有背景图像？
【发布时间】：2010-04-24 19:26:47
【问题描述】：

我希望所有 .jpg 链接都有特定的背景图片。所以像“http://mysite/myimage.jpg”这样的页面上的链接会自动带有一个小图标作为前缀。实际上所有指向图像的链接，即 .gif .png 以及具有相同图标的链接。如果链接指向一个网站，即.htm/.php/.html/.asp，它应该有不同的图像。我希望它通过 CSS 中的类。任何帮助表示赞赏。 TIA

【问题讨论】：

标签： html css image

【解决方案1】：

我认为这应该可行，不过它使用的是 CSS3 属性选择器，所以浏览器的实现变化很大：

a[href$='png'],
a[href$='gif'] {/* styles */}

它基本上选择了所有href 属性以（$= 部分）文件类型扩展名“png”或“gif”结尾的链接（显然其他文件类型也可以）。

参考资料和更多详细信息：http://www.css3.info/preview/attribute-selectors/

已编辑：

所以，如果我只想为 youtube 链接制作一个特殊的 BG 图片，我会使用a[href$='youtube'] {/* styles */}

不，如果您只希望它用于 YouTube 链接，您可以使用：

a[href*=youtube] { /* css */ }

*= 相当于“包含”，但您可以使用：

a[href^=http://www.youtube.com] { /* css */ }

【讨论】：

感谢您的回复，两位。是的，事实上我想要所有链接到图像的链接，并且这段代码 a[href$='gif'] {/* styles /} 工作得很好。我以前见过它，但是语法错误并且不起作用。所以，如果我只想为 youtube 链接制作一个特殊的 BG 图片，我会使用 a[href$='youtube'] {/ 样式 */}
谢谢饭碗，我按照你的参考资料，又挖了一点 a[href^=example.com] { color: red; } 在css-tricks.com/attribute-selectors 上找到，与上面的示例相同。非常感谢你们的帮助，我只需要知道要寻找什么。你教我钓鱼！值这么多

【解决方案2】：

您可以使用 CSS 选择器 + 背景 URL 属性来完成此操作。例如，要在 Anchor 标记中包含带有所有 IMG 标记的图标：

A IMG { background: url("/icon.png") no-repeat scroll; }

【讨论】：

我认为他的意思是所有链接到图像的链接，而不是所有包含图像的链接（但我之前错了，所以你可能是对的）。