CSS中的乘法模式？

Question

在Photoshop中，如果将带有白色背景的JPG图像导入带有蓝色的文档中background，则可以background通过将图像设置为“倍增”模式来使图像的白色消失。

我可以单独使用CSS做完全相同的事情吗？

Answer 1

在CSS中，您可以使用 mix-blend-mode

该mix-blend-modeCSS属性描述的元素含量应该如何与低于它和元素的背景元素的内容融为一体。

片段

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

该background-blend-modeCSS属性描述元素的背景图像应该如何与对方和元素的背景颜色相混合。

片段

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浏览器不支持两者，请参见此处和此处的支持