如何使用CSS

覆蓋HTML圖像我有我當前的代碼：如何使用CSS

#content img[src="/img/test.gif"] { 
    background-image:url(dark-img.png) !important; 
}

從我的理解!important;覆蓋現有的值？

爲什麼這不重寫當前的HTML圖像呢？後臺顯示，後面的的HTML圖像。

我想要它在HTML圖像前面，這是可能使用CSS或JS？

編輯：爲了什麼它的價值，即時製作一個腳本，將修改網站的現有風格。所以我沒有直接訪問HTML圖像。

來源

2010-09-23 Dean

「img」元素的圖像不是「現有的背景圖像值」。背景圖像和「正常」（前景，內容）圖像是兩個獨立的東西，你不能用一個來覆蓋另一個。 – RoToRa 2010-09-23 15:29:27

錯誤的工具。你想爲此使用JS。 – 2010-09-23 15:45:17

不需要使用錯誤的工具。看到我的答案。 – RobAu 2012-05-01 10:52:22

使用'userscript'來更改'src'屬性值。如果沒有ID

document.getElementById('TheImgId').src = 'yournewimagesrc';

：中imgElements

var imgElements = document.getElementsByTagName('img');

DO迭代

如果有一個ID在那裏，你可以做到這一點。當它的src值與您的標準匹配時，請用您自己的值更改該值，並確保中斷。

更新：

的Javascript：

<script language="javascript"> 
    function ChangeImageSrc(oldSrc, newSrc) { 
     var imgElements = document.getElementsByTagName('img'); 
     for (i = 0; i < imgElements.length; i++){ 
      if (imgElements[i].src == oldSrc){ 
       imgElements[i].src = newSrc; 
       break; 
      } 
     } 
    } 
</script>

HTML：

<img src="http://i.stack.imgur.com/eu757.png" /> 
<img src="http://i.stack.imgur.com/IPB9t.png" /> 
<img src="http://i.stack.imgur.com/IPB9t.png" /> 
<script language="javascript"> 
    setTimeout("ChangeImageSrc('http://i.stack.imgur.com/eu757.png', 'http://i.stack.imgur.com/IPB9t.png')", 5000); 
</script>

預覽：

alt text

第一張圖像將在5秒後被替換。嘗試Live Demo。

來源

2010-09-23 15:42:18

你已經完全失去了我，我幾乎沒有碰過JS，更不用說GM了。 – Dean 2010-09-23 15:48:12

'img'的'src'不是風格，不能用CSS過分控制。大家都建議你使用Javascript。 – 2010-09-23 16:03:47

我明白那一點。該圖像不包含ID，它只是純粹的HTML，帶有src =「image2.jpg」。我試過'如果沒有身份證'的東西，它似乎沒有工作從什麼即時通訊嘗試。在我進一步研究這個mod之前，我需要學習JS嗎？（需要通過JS完成2個圖像，通過外觀）。 – Dean 2010-09-23 16:08:01

您必須將第一張圖片作爲背景圖片。然後你可以覆蓋它。你可以在網站的「標準」CSS文件中做，每個用戶都有自己的，他可以覆蓋他想要的東西。

來源

2010-09-23 15:29:11 Tokk

我不能改變第一張圖片，因爲它由網站所有者運行 - 而不是我。它使用時尚修改網站。 – Dean 2010-09-23 15:33:29

background-image屬性應用於圖像時，指的是（滾筒...）圖像的背景圖像。它將永遠在圖像後面。

如果你想要的形象出現在圖像的前，你將不得不使用兩個圖像，或其他容器背景圖像覆蓋第一圖像。

順便說一句，依靠!important來覆蓋是不好的做法。它也可能是無效的，因爲1）它不能覆蓋元素樣式屬性中的聲明，2）只有在可以基於標記和當前CSS工作時纔有效。在你的情況下，所有的聲音和膨化以及!important聲明都不會使圖像做一些它無法做到的事情。

來源

2010-09-23 15:30:04 Robusto

對不起 - 沒有想清楚。我瞭解它的背景圖片。有沒有一種方法可以用Javascript重寫它？（思考GM）。 – Dean 2010-09-23 15:32:49

你絕對可以用Javascript來覆蓋它。只需獲取對圖像的引用（讓我們說「myImage」）並執行'myImage.src =「dark-img.png」'或任何你想要的。 – Robusto 2010-09-23 15:38:43

我同意這裏所有的答案，只是認爲ID指出，「瀏覽器」，例如IE不會像IMG [SRC =「/ IMG/test.gif」]作爲選擇圖像的手段。它需要一個類或ID。

來源

2010-09-23 15:49:34

老版本的IE不會喜歡它。不過，IE8應該沒問題。 – Spudley 2010-09-23 15:54:51

在標籤中所示的圖像是在元件中，不是背景的前景，所以設置在背景圖像將不會覆蓋所述圖像;就像你看到的那樣，它會出現在主圖像後面。

你想要做的是替換圖像。以下是您的選項：

從具有背景圖像的元素開始，而不是標籤。然後在CSS中更改背景圖片將取代它。
以標籤開頭，但使用Javascript更改src屬性。（這不能用CSS來完成，但是是很簡單的在JS）

編輯：

看到您編輯的問題，我建議選擇2 - 使用JavaScript的改變src屬性。這很簡單;像這樣的事情會做的伎倆：

document.getElementById('myimgelement').src='/newgraphic.jpg';

來源

2010-09-23 15:54:08 Spudley

你不需要JavaScript的圖像替換！只要您可以通過CSS選擇器識別圖像，就可以使用CSS來完成這個竅門。

看到這裏 http://www.audenaerde.org/csstricks.html#imagereplacecss

來源

2012-05-01 10:51:55 RobAu

解決方案中的更換CSS的圖像可以通過多種方式來完成。他們每個人都有一些缺點（如語義，搜索引擎優化，browsercompatibility，...）

在這個環節9（！）不同的技術在一個非常好的方式討論：

http://css-tricks.com/css-image-replacement/

如果你對一般的css感興趣：整個站點值得一看。

來源

2012-08-17 14:58:18 Peter

我在另一個SO頁面回答類似的問題..

https://robau.wordpress.com/2012/04/20/override-image-src-in-css/

<img src="linkToImage.jpg" class="egg"> 

.egg { 
    width: 100%; 
    height: 0; 
    padding: 0 0 200px 0; 
    background-image: url(linkToImage.jpg); 
    background-size: cover; 
}

所以有效地隱藏圖像和填充向下的背景。哦，什麼是黑客，但如果你想與替代文字和背景，可以擴展而不使用JavaScript？

來源

2015-08-24 19:00:36 Pocketninja

下面是代碼using only css：

<img src="tiger.jpg" 
    style="padding: 150px 200px 0px 0px; 
      background: url('butterfly.jpg'); 
      background-size:auto; 
      width:0px; 
      height: 0px;">

設置圖像尺寸爲0x0，
添加所需的大小（150x200）的邊界，並
使用您的圖片作爲背景圖像填充。

如果你喜歡這個答案，請給@RobAu's answer upvote。

來源

2015-08-25 15:07:45

這種方法確實需要一個已知/固定大小的圖像，但是對嗎？ – rainabba 2016-04-12 15:46:19

@rainabba：您可以修復空間的大小。如果背景圖像較大，則會裁剪。如果它較小，則平鋪。 – 2016-04-13 18:43:21

回答

相關問題