在CSS中定義一個<img>的src屬性

我需要在CSS中定義一個< img>的src屬性。有沒有辦法指定這個屬性？在CSS中定義一個<img>的src屬性

2010-04-20 Massimo Ugues

見http://stackoverflow.com/a/10247567/461499 – RobAu 2013-01-22 15:59:49

的http：// stackoverf low.com/questions/2182716/how-can-we-specify-src-attribute-of-img-tag-in-css – aldebaran 2014-02-11 14:08:09

#divID { 
background-image: url("http://imageurlhere.com"); 
background-repeat: no-repeat; 
width: auto; /*or your image's width*/ 
height: auto; /*or your image's height*/ 
margin: 0; 
padding: 0; 
}

來源

2010-04-20 15:34:44

這是關於你可以得到的儘可能接近。 – zmbush 2010-04-20 15:35:32

@zipcodeman：那太糟糕了。 'background-image：'方法有一些限制。就像，你無法控制圖像的尺寸。您可以使圖像空間變大，當然，不是實際的圖像。 – TARKUS 2013-11-25 18:37:19

@GregoryLewis我認爲這是更好的：http://stackoverflow.com/questions/2182716/how-can-we-specify-src-attribute-of-img-tag-in-css – mila 2014-12-11 13:21:57

不，沒有。你可以指定一個背景圖片，但這是不是同樣的事情。

來源

2010-04-20 15:34:44 cletus

確實。 ''代表一個內容圖像。如果圖片不是內容，那麼它不應該是''元素。如果是內容，那應該是。如果內容在多個頁面上被複制（例如作爲菜單的一部分），那麼它的HTML應該也是如此（例如使用模板系統），就像任何其他重複的內容一樣。 – Quentin 2010-04-20 15:36:49

CSS不用於定義值到DOM元素的屬性，javascript會更適合這個。

來源

2010-04-20 15:35:35

號，你可以得到的是設置背景圖片最接近：

<div id="myimage"></div> 

#myimage { 
    width: 20px; 
    height: 20px; 
    background: white url(myimage.gif) no-repeat; 
}

來源

2010-04-20 15:35:49 RoToRa

他們是對的。 IMG是一個內容元素，CSS是關於設計的。但是，當您將某些內容元素或屬性用於設計目的時，該怎麼辦？如果我更改樣式（CSS），我必須更改我的網頁上的IMG。

那麼這是一個定義IMG演示文稿（沒有真正的圖像）在CSS風格的解決方案。
1：創建1x1透明GIF或PNG。
2：將IMG的標準「src」分配給該圖像。
3：用CSS樣式中的「background-image」定義最終的演示文稿。

它的工作原理就像一個魅力:)

來源

2011-08-11 11:40:56 Frank

如果你需要''來打印，這就是我所處的情況，這是行不通的。 – 2013-07-10 20:12:22

你有沒有** 1x1透明gif或png **用於_download it_？任何帶有'html和css代碼'的完整示例？ – Kiquenet 2018-02-19 11:53:37

126

只是以此爲img標籤是一個內容元素

img { 
content:url(http://example.com/image.png); 
}

來源

2012-07-23 00:42:38 Marinos

我試過了，它只適用於谷歌瀏覽器。 – 2012-10-09 14:56:01

我試過了，它可以在Web上使用（帶有iOS和phonegap） – 2013-05-04 11:48:41

Chrome上的Tks.Works！ – 2013-07-30 01:48:01

嘗試這些解決方案我還不滿意，但之後我找到了解決這個article和它的作品在Chrome，Firefox，歌劇，Safari瀏覽器，IE8 +

#divId { 

    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 */ 

}

來源

2014-02-17 14:20:35 Eric

我即將發佈相同的文章，它完全適合我，而且我必須在我的網站上支持IE。如果它適用於IE ... – Rafiki 2015-03-13 11:58:27

在CSS中定義一個<img>的src屬性

回答

相關問題