css - 如何更改圖像源的ID？

我需要能夠從CSS中更改圖像src。我有循環印刷< img id=.. >標籤，併爲每個id它不同的圖像。我希望能夠通過樣式CSS區域的id來設置源代碼。

有誰知道如何做到這一點？

2011-02-27 gabi

這對於CSS來說是不可能的。然而，這是很容易使用JavaScript：

document.getElementById("IdOfImage").src = "SourceOfImage";

來源

2011-02-27 17:34:04

偉大，我會檢查出來.. – gabi 2011-02-27 17:46:51

是可能的。請參閱http://stackoverflow.com/a/10247567/461499 – RobAu 2013-01-13 08:21:23

這是不可能的：圖像的來源是標記的一部分，而不是CSS。

唯一的解決方法是將div元素與background-image屬性相反。這些你可以從樣式表中設置：

<div id="image1"></div> 

#image1 { width: 100px; height: 50px; background-image: url(image.gif); }

然而，用這種方法，你失去所有的img標籤的優勢，像

設置一個alt文本
的能力，重新調整
打印（大多數瀏覽器不打印背景圖像）
搜索引擎索引（可能）

唯一的另一種選擇是使用JavaScript，但如果JavaScript被禁用，這顯然不會工作，這使得我認爲這是一個禁忌。

來源

2011-02-27 17:30:02

你不能真正做到這一點，但是，如果你需要做的是使用CSS，你可以對兩幅圖像，像這樣大小相同做到這一點：

<style> 
img { 
    width:0; 
    height:0; 
    display:block; 
    background: url('2.png') no-repeat bottom left; 
    padding-left:196px; 
    padding-bottom:187px; 
} 
</style> 
<img src="1.png">

只在FF3.6中測試它。

來源

2011-02-27 17:59:37 markijbema

我找到了this article這可能是有用的。它實際上改變圖像

這裏的背景的情況下，網站的例子就不復存在了：

HTML

<html> 
    <body> 
     <div class="header"> 
      <img class="banner" src="http://notrealdomain1.com/banner.png"> 
     </div> 
    </body> 
</html>

CSS

/* All in one selector */ 
.banner { 
    display: block; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
    background: url(http://notrealdomain2.com/newbanner.png) no-repeat; 
    width: 180px; /* Width of new image */ 
    height: 236px; /* Height of new image */ 
    padding-left: 180px; /* Equal to width of new image */ 
}

來源

2013-12-20 02:16:59 AaA

如果你不這樣做想要使用背景或使用JavaScript，您可以在每個圖層上使用不同的src圖層進行分層其他（使用絕對定位）並使用CSS隱藏其中一個或另一個。在視覺上，它將是相同的，然後改變src。

來源

2014-08-27 12:00:26 Rolf

現在可以使用CSS3使用Content風格。我使用它通過媒體查詢基於窗口大小在滑塊內交換圖像。

編輯：當我最初發布這個時，我並不知道它現在只在Webkit中有效。但是我懷疑它需要很長時間才能在瀏覽器中獲得更多功能。

HTML

<img class="img1" src="image.jpg">

CSS

@media (min-width: 768px) { 
    .img1 { 
     content: url(image.jpg); 
    } 
} 
@media (max-width: 767px){ 
    .img1 { 
     content: url(new-image.jpg); 
    } 
}

來源

2015-03-03 16:33:06 Charbrec

css - 如何更改圖像源的ID？

回答

相關問題