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;
}

Answer 2

您可以使用一些方法。在我看来，最好的是＃1，因为它拥有最广泛的浏览器支持，并且它避免使用JS。

1 - 您可以只选择a（假设href是唯一的），显示背景图像，然后隐藏包含的图像。您还需要指定width，身高, and显示on the a`：

a[href$='OnlyThisONE'] img {
    display: none; /* hide the image that's there */
}
a[href$='OnlyThisONE'] {
    background: url(someOtherImage.jpg) /* show another image as a background */
    display: inline-block;
    height: 100px;
    width: 100px;
}

2 - 使用content:url()，但它没有广泛的浏览器支持 - Is it possible to set the equivalent of a src attribute of an img tag in CSS?对content:url()的支持进行快速自我检查后，我根本不建议这样做。我只能让它在Chrome中运行。亲自尝试：http://jsfiddle.net/3BRN7/49/

a[href$='OnlyThisONE'] img {
    content:url("newImage.jpg");
}

3 - 在问题中使用JavaScript。

Answer 3

如果src是“random.png”，则会显示“new.png”。

HTML

<a href="#">
 <img class="SameClassForAllIMG" src="//dummyimage.com/300x100/111/fff&text=random.png">
 <span></span>
</a>

<a href="#">
 <img class="SameClassForAllIMG" src="//dummyimage.com/300x100/111/fff&text=images.png">
 <span></span>
</a>

CSS

img.SameClassForAllIMG[src*="random.png"] {
    display: none;
}
img.SameClassForAllIMG[src*="random.png"] + span {
    display: inline-block;
    width: 300px;
    height: 100px;
    background: url(//dummyimage.com/300x100/111/fff&text=new.png) no-repeat left top;
}

我想这段代码与您的JavaScript解决方案相同。

IE7＆gt; =版本http://jsfiddle.net/nxvm7/1/
IE8＆gt; =版本http://jsfiddle.net/nxvm7/2/

Answer 4

在CSS中，您可以使用pseudo-element上的<a>或background-image中的<a>，也可以使用只能在悬停时看到的<img>。< / p>

这是2个演示

一个使用伪元素
使用带有背景的img标签。（没有src改变）。

http://codepen.io/anon/pen/Jchjw

<p>Set background-image, and resize it to zero with padding on :hover 
<a href="#nature"><img class="a-img" src="http://lorempixel.com/120/80/nature/1"> 
</a></p>
<p>use a pseudo-element set in absolute position and overflow in a tag :
<a href="#nature3"><img class="a-img" src="http://lorempixel.com/120/80/nature/3">
</a></p>

img {
  vertical-align:middle;
}
[href="#nature"]:hover .a-img {
  height:0;
  width:0;
  padding:40px 60px;
  background:url(http://lorempixel.com/120/80/nature/2);
}
[href="#nature3"] {
  display:inline-block;
  vertical-align:middle;
  position:relative;
  overflow:hidden;
}
[href="#nature3"]:after {
  content:url(http://lorempixel.com/120/80/nature/4);
  vertical-align:top;
  position:absolute;
}
[href="#nature3"]:hover:after {
  left:0;
}

a:hover + img背景适用于最老的IE ，它保持alt属性有用，这将是我的选择。伪元素：在/之后，来自IE8，但不是 :: * 之后的 :: *在syntaxe之前。

thess in css当然，许多其他解决方案使用a或img使用或不使用translucide gif / png :( ....

仅使用CSS更改图像。

4 个答案: