css - CSS 中的乘法模式？

Question

在 Photoshop 中，如果将具有白色背景的 JPG 图像导入到具有蓝色背景 的文档中，您可以通过设置图像到“相乘”模式。

我可以单独使用 CSS 做同样的事情吗？

Answer 1

在 CSS 中你可以使用 mix-blend-mode

The mix-blend-mode CSS property describes how an element content should blend with the content of the element that is below it and the element's background.

片段

body {
  margin: 0;
  background: url(http://lorempixel.com/1200/1200) no-repeat 0 0 / cover
}
img {
  mix-blend-mode: multiply;
}

<img src="//placehold.it/300" />

或者您可以使用 background-blend-mode

The background-blend-mode CSS property describes how the element's background images should blend with each other and the element's background color.

片段

div {
    width: 300px;
    height: 300px;
    background: url('https://mdn.mozillademos.org/files/8543/br.png'),url('https://mdn.mozillademos.org/files/8545/tr.png');
    background-blend-mode: multiply;
}

<div></div>

IE 不支持两者，请参阅支持 here和 here