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

Question

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

我不希望能够根据它是否是视网膜来更改图像。

例子

HTML:

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

CSS:

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

Answer 1

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