CSS 中的乘法模式？

Question

在 Photoshop 中，如果将白色背景的 JPG 图片导入到蓝色 background 文档中，您可以通过将图片设置为 [=] 使图片的白色 background 消失17=]模式。

我可以单独用 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 and here

Answer 2

您可以使用 background-blend-mode but only in Chrome and Firefox.

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

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

Answer 3

是的...有点...

这个问题有点含糊，但我们可以去掉图像的白色 'part' 并让我们看到它后面的元素的背景颜色吗？

是的，我们可以...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>

CSS 中的乘法模式？

Multiply mode in CSS?

css

background-blend-mode

mix-blend-mode

片段

片段