使用css屬性替換圖像標籤的src

有沒有什麼辦法可以用圖像選項卡的SRC屬性中提到的圖像來使用任何css技巧？使用css屬性替換圖像標籤的src

<img src = "setting-icon.png"></img>

我要更換的設定，用的icon.png CSS屬性，我能夠把其它圖像的背景圖像標籤的background-image屬性，但我需要藏在src和展示中提到的一個我在CSS中的背景圖像屬性中提到了什麼。

是的這是奇怪的要求，但事情是我在第三方應用程序中進行自定義，我只能控制css，我無法修改HTML標記。

感謝您的閱讀！

來源

2017-02-23 Mayur Randive

您可以使用content:url("image.jpg")

https://developer.mozilla.org/en-US/docs/Web/CSS/content

在你的CSS，

.img { 
    content:url("/new/image/source.png"); 
}

如果您不能修改HTML，

img { 
    content:url("/new/image/source.png"); 
}

在HTML，

<img class="img"/>

我還沒有嘗試過，但我不確定內聯屬性src是否會超重CSS content。

更新

，如果你已經Src在您的img元素它應該工作。謝謝@pol

來源

2017-02-23 03:46:47

他無法修改HTML，因此我認爲他無法在圖像上添加'class'。 –

更改爲元素選擇器，然後 –

它的工作，內容url覆蓋img標記的src –

您不能使用CSS更改html屬性值，只能使用javascript。

但是，通過CSS，您可以「隱藏」圖像，並在其位置放置背景。

div img { 
 
    height: 0; 
 
    width: 0; 
 
    padding-top: 175px; 
 
    padding-left: 280px; 
 
    background-image: url("http://www.planwallpaper.com/static/cache/6f/82/6f8200c95d588fde83d1f212f674611a.jpg"); 
 
}

<img src="http://www.planwallpaper.com/static/cache/a1/4e/a14e880ef245c3d159ba96ebbeb4c8c3.jpg"> 
 

 
<div>Changed img:</div> 
 
<div><img src="http://www.planwallpaper.com/static/cache/a1/4e/a14e880ef245c3d159ba96ebbeb4c8c3.jpg"></div>

來源

2017-02-23 03:54:43 pol

會嘗試這個，並且在某個時候讓你知道，謝謝pol你的時間！ –

@MayurRandive你可以使用jQuery/Javascript嗎？ –

@ Deepak Yadav：沒有 –

好問題，瞭解如何使用CSS忽視選擇，

此外，你可以閱讀更多關於其他選擇，

例如：

img: hover {}

和其他一些不錯的選擇針對不同範圍的元素

:active 

:after 

:before 

:first-child 

:first-letter 

:first-line 

:focus 

:hover 

:lang 

:link 

:visited

你甚至可以有條件地選擇這樣的：

img[src="setting-icon.png"] { 
    border: 1px solid #000000; 
    content:url("/new/image/source.png"); 
}

參考：W3.org - Advanced Selectors

來源

2017-02-23 04:34:56 wpcoder

使用css屬性替換圖像標籤的src

回答

相關問題