CSS - 可以用背景图像覆盖图像吗？答案

【问题标题】：CSS - Overwrite image with background-image possible?CSS - 可以用背景图像覆盖图像吗？
【发布时间】：2013-08-07 12:54:03
【问题描述】：

是否可以用带有背景图像的新图像以某种方式覆盖图像？

我不能根据是否使用 css 来更改图像。

例子

HTML：

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

CSS：

#foo { background: url("bar.png") }

【问题讨论】：

我会为此目的使用 javascript
这很好：github.com/scottjehl/picturefill
如果图像有容器，你可以通过 CSS 来实现。然后将背景图片应用到容器中，并将容器内的图片设置为display:none，但我怀疑有更好的解决方案...

标签： html css image background-image overwrite

【解决方案1】：

试试css3 :before：

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

【讨论】：

【解决方案2】：

对我来说似乎有点复杂的策略。让我建议一个更好的选择来处理视网膜质量的图像。我见过的最简单的策略（在这个阶段我感觉最好）是使图像的宽度和高度是 Photoshop 中所需的两倍，然后以相当低的质量保存以减小文件大小。在您的 HTML 或 CSS 或两者中，设置图像的所需宽度和高度。这样，它在普通屏幕和视网膜屏幕上看起来都很棒，而且文件大小仍然非常小。而且您也只需要一张图片，这很棒。

【讨论】：

好建议...为此，我一直在尝试真正压缩非常高分辨率的图像。有时它有效，有时无效。在我们处理响应式图像日益增长的痛苦时，它是您的武器库中的一个很好的工具。
是的，这可能是最好的方式