是否能夠在CSS中設置img標籤的src屬性的等效項？

時間 2020-01-16

標籤是否能夠 css 設置 img 標籤 src 屬性等效欄目 CSS 简体版

原文原文鏈接

是否能夠在CSS中設置src屬性值？目前，我正在作的是： css

<img src="pathTo/myImage.jpg"/>

我但願它像這樣 html

<img class="myClass" />

.myClass {
    some-src-property: url("pathTo/myImage.jpg");

我想不使用CSS中的background或background-image:屬性來執行此操做。 web

#1樓

我今天發現了一個解決方案（可在IE6 +，FF，Opera，Chrome中運行）：網絡

<img src='willbehidden.png' 
 style="width:0px; height:0px; padding: 8px; background: url(newimage.png);">

這個怎麼運做： mvvm

圖像將縮小，直到寬度和高度再也不可見。
而後，您須要使用填充「重置」圖像尺寸。這給出了一個16x16的圖像。固然，您能夠使用padding-left / padding-top製做矩形圖像。
最後，使用背景將新圖像放置在那裏。
若是新的背景圖像太大或過小，建議使用background-size ，例如： background-size:cover; 使您的圖像適合分配的空間。

它也適用於提交輸入圖像，它們保持可點擊狀態。 ide

觀看現場演示： http : //www.audenaerde.org/csstricks.html#imagereplacecss 工具

請享用！測試

#2樓

若是您嘗試根據項目的上下文動態在按鈕中添加圖像，則能夠使用？根據結果參考來源。在這裏，我使用mvvm設計，讓個人Model.Phases [0]值肯定我是否但願基於燈光相位的值在個人按鈕上填充打開或關閉的燈泡圖像。 url

不肯定是否有幫助。我正在使用JqueryUI，Blueprint和CSS。類定義應容許您根據本身的喜愛爲按鈕設置樣式。 spa

<button>                           
  <img class="@(Model.Phases[0] ? "light-on": "light-off")" src="@(Model.Phases[0] ? "~/Images/LightBulbOn.png" : "~/Images/LightBulbOff.png")"/>                             
  <img class="@(Model.Phases[0] ? "light-on": "light-off")" src="@(Model.Phases[0] ? "~/Images/LightBulbOn.png" : "~/Images/LightBulbOff.png")"/>   
  <img class="@(Model.Phases[0] ? "light-on": "light-off")" src="@(Model.Phases[0] ? "~/Images/LightBulbOn.png" : "~/Images/LightBulbOff.png")"/>

#3樓

我發現了比提出的解決方案更好的方法，可是它確實使用了背景圖像。 兼容方法（沒法確認IE6）信用： http : //www.kryogenix.org/code/browser/lir/

<img src="pathTo/myImage.jpg"/>

CSS：

img[src*="pathTo/myImage.jpg"] {

    background-image: url("mynewimg.jpg"); /* lets say 20x20 */
    width: 20px;

    display:inline-block;
    padding: 20px 0 0 0;
    height: 0px !important;

    /* for IE 5.5's bad box model */
    height /**/:20px;
}

看不到舊圖像，而新圖像則符合預期。

如下簡潔的解決方案僅適用於webkit

img[src*="pathTo/myImage.jpg"] {

    /* note :) */
    content:'';
    display:inline-block;

    width: 20px;
    height: 20px;
    background-image: url("mynewimg.jpg"); /* lets say 20x20 */

}

#4樓

使用content:url("image.jpg") 。

完整的工做解決方案（實時演示）：

<!doctype html> <style> .MyClass123{ content:url("http://imgur.com/SZ8Cm.jpg"); } </style> <img class="MyClass123"/>

通過測試和工做：

鉻14.0.835.163
Safari 4.0.5
Opera 10.6

通過測試，沒法正常工做：

FireFox 40.0.2（觀察開發人員網絡工具，您能夠看到已加載URL，但未顯示圖像）
Internet Explorer 11.0.9600.17905（URL永遠不會加載）

#5樓

個人答案是重申先前的解決方案並強調純CSS實現。

若是您要從另外一個站點採購內容，所以您沒法控制所提供的HTML，則須要Pure CSS解決方案。就我而言，我試圖刪除許可源內容的品牌，以便被許可方沒必要爲他們購買內容的公司作廣告。所以，我在保留全部其餘內容的同時刪除了他們的徽標。我應該注意，這樣作是在個人客戶合同範圍內的。

{ /* image size is 204x30 */
     width:0;
     height:0;
     padding-left:102px;
     padding-right:102px;
     padding-top:15px;
     padding-bottom:15px;
     background-image:url(http://sthstest/Style%20Library/StThomas/images/rhn_nav_logo2.gif);
}