javascript - 仅使用 CSS 更改图像。

Question

我有类似的东西

<a href="OnlyThisONE"
 <img class="SameClassForAllIMG" src="random.png"> 
</a>

我想仅使用 CSS 替换其他内容的图像。这可能吗？

这是 Javascript 解决方案。

var images = document.getElementsByTagName('IMG');
for (var i = 0; i < images.length; ++i) {
    if (images[i].src == "random.png")
        images[i].src = 'new.png';
}  

这是一个可能的 CSS 解决方案

.SameClassForAllIMG {
  background: url(new.png) no-repeat;
}

问题是 CSS 应该只在“OnlyThisONE”href 下为 IMG 做这件事，而不是所有的人。这可能只使用 CSS 吗？

Answer 1

这仅使用 CSS 是可能的。您可以使用 a[href='OnlyThisONE'] 定位图像并隐藏 <img>内的标签，然后将背景应用到 <a>链接。

CSS

a[href='OnlyThisONE'] img {
    display: none;
}
a[href='OnlyThisONE'] {
    background: url('somebackground.jpg');
    width: 100px;
    height: 100px;
    display: block;
}