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 - 用背景图像覆盖图像可能吗？

回答

相关问题