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

Question

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

我无法根据是否使用 CSS 来更改图像。

例子

HTML：

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

CSS：

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

Answer 1

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

Answer 2

尝试 css3 :before：

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