如何使图像超链接具有背景图像?

时间:2010-04-24 19:26:47

标签: html css image

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

2 个答案:

答案 0 :(得分:1)

我认为这应该可行,但它使用CSS3属性选择器,因此浏览器实现方式千差万别:

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

它基本上选择了href属性以($=部分)文件类型扩展名“png”或“gif”结尾的所有链接(显然其他文件类型也是如此)。< / p>

参考资料,详情请见: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 */ }

答案 1 :(得分:0)

您可以使用CSS选择器+后台网址属性来完成此操作。例如,要在Anchor标记中包含一个包含所有IMG标记的图标:

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