CSS - 用背景圖像覆蓋圖像可能嗎？

是否有可能以某種方式覆蓋具有背景圖像的新圖像的圖像？CSS - 用背景圖像覆蓋圖像可能嗎？

我不能改變圖像，取決於如果它的視網膜或不與CSS。

例

HTML：

<img id="foo" src="foo.png">

CSS：

來源

2013-08-06 Philip

我會使用JavaScript用於這一目的 –

這是一件好事：https://github.com/scottjehl/picturefill –

您可以通過CSS如果圖像有一個做容器。然後你會將背景圖片應用到容器中，並將容器內的圖像設置爲「display：none」，但我懷疑有更好的解決方案... –

似乎有點令人費解的一個戰略的給我。讓我建議一個更好的選擇來處理視網膜質量的圖像。我見過的最簡單的策略（在這個階段我感覺最好）是讓圖像在Photoshop中的寬度和高度兩倍，然後以相當低的質量保存，以減小文件大小。在您的HTML或CSS或兩者中，設置圖像的所需寬度和高度。這種方式在普通屏幕和視網膜屏幕上看起來非常棒，而且文件尺寸仍然非常小。而且你也只需要一張圖片，這很棒。

來源

2013-08-06 13:35:09

好的建議...我一直在試圖擠壓爲此目的下來非常高分辨率的圖像。有時它起作用，有時不起作用。在我們處理響應式圖像日益增長的痛苦時，它是您的武器庫中的一個強大工具。 –

是啊，這可能是最好的方式去 – Philip

嘗試CSS3 :before：

img{ 
    display:none; 
} 
img:before{ 
    content: ""; 
    width: 20px; 
    height: 20px; 
    background: url("bar.png"); 
}

來源

2013-08-06 13:39:56 M1K1O

：之前和之後：不工作img元素 –

CSS - 用背景圖像覆蓋圖像可能嗎？

回答

相關問題