僅使用CSS更改圖像。

我有類似僅使用CSS更改圖像。

<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應該這樣做的IMG只有在「OnlyThisONE的」 href，而不是所有的人。這可能只使用CSS？

來源

2014-01-27 Sten Kin

IMO，你做什麼用CSS是躲在一個圖像和顯示另一個 –

它不會是隨機的，除非你使用預處理器 –

作爲可能的答案組合http://jsfiddle.net/DZRzL/1/ – DaniP

這是可能的只使用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; 
}

來源

2014-01-27 17:01:50 AfromanJ

有，你可以使用一些方法。在我看來，最好的是＃1，因爲它有最廣泛的瀏覽器支持，它避免了JS的使用。

1 - 您可以選擇那個a（假設href是唯一的），顯示背景圖像，然後隱藏包含的圖像。您還需要指定width，高度, and顯示on the了`：

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作爲你在你的問題都有。

來源

2014-01-27 17:06:05 matthewpavkov

@Danko錯了。如果您設置了「display：inline-block」，則可以設置寬度/高度。另外，如果你專門檢查了對'content：url（）的支持，你會發現它不是很好。 – matthewpavkov

自己創建一個測試頁並嘗試一下。它在Firefox或IE中不適用於我。如果我在這裏錯過了一些東西，請填寫。 – matthewpavkov

我的錯誤我的朋友似乎只適用於幾個實例，但在這種情況下不會刪除我的評論，並且我看到您爲第一個選項添加正確的值+1 – DaniP

如果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> =版本http://jsfiddle.net/nxvm7/1/
IE8> =版本http://jsfiddle.net/nxvm7/2/

來源

2014-01-27 17:18:55 GeckoTang

在CSS中，你可以使用上<a>要麼pseudo-element或<a>甚至<img>一個background-image只能懸停可以看到。

這裏是使用僞元件

一個使用與背景img標籤2演示

之一。（沒有更改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開始工作之前，而不是在之前的語句之前的:: * 之後/ :: *。

在孤單當然CSS，許多其他的解決方案與a或img帶或不帶translucide GIF/PNG :(工作....

來源

2014-01-27 17:20:41

僅使用CSS更改圖像。

回答

相關問題