css - CSS中的乘法模式？

Question

在 Photoshop 中，如果您将具有白色背景的 JPG 图像导入到具有蓝色 的文档中background，您可以background通过将图像设置为“正片叠底”模式来使图像的白色消失。

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

Answer 1

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

CSS 属性描述了元素内容应该如何与其下方元素的mix-blend-mode内容和元素的背景混合。

片段

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

CSS 属性描述了元素的background-blend-mode背景图像应该如何相互融合以及元素的背景颜色。

片段

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

Answer 2

您可以使用背景混合模式，但只能在 Chrome 和 Firefox中使用。

根据 CSS Tricks 文章，代码如下所示：

.blended {
    background-image: url(face.jpg);
    background-color: red;
    background-blend-mode: multiply;
}

Answer 3

是的……有点……

这个问题有点含糊，但我们可以删除图像的白色“部分”并让我们看到它背后元素的背景颜色吗？

是的，我们可以...用mix-blend-mode.

body {
  background: blue;
  text-align: center;
}
div {
  mix-blend-mode: multiply;
  display: inline-block;
  margin: 1em auto;
}

<div>
  <img src="http://images.clipartpanda.com/penguin-clip-art-penguin_clip_art_7050.jpg" alt="" />
</div>

注意：这仅显示包含图像的 div后面的元素的背景....如果您将背景颜色添加到包装 div，则不会发生任何事情。

为此，您可能需要另一个包装器。

body {
  background: blue;
  text-align: center;
}
div.parent {
  display: inline-block;
  margin: 1em auto;
  background: red;
}
div.child {
  mix-blend-mode: multiply;
}

<div class="parent">

  <div class="child">
    <img src="http://images.clipartpanda.com/penguin-clip-art-penguin_clip_art_7050.jpg" alt="" />
  </div>

</div>

或者作为伪元素的背景：

body {
  background: blue;
  text-align: center;
}
.child {
  width: 200px;
  height: 200px;
  background: red;
  margin: 1em auto;
  position: relative;
  background-color: red;
}
div.child::before {
  mix-blend-mode: multiply;
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-image: url(http://images.clipartpanda.com/penguin-clip-art-penguin_clip_art_7050.jpg);
  background-size: cover;
  z-index: 0;
}

<div class="child"></div>