Question

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

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

Answer 1

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

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

段

＆＃13;

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

＆＃13;

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

＆＃13;

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

background-blend-mode CSS属性描述了元素的方式背景图像应该相互融合并与元素相互融合背景颜色。

段

＆＃13;

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;
}

＆＃13;

<div></div>

＆＃13;

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

Answer 2

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

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

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

Answer 3

是......有点......

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

注意：这只显示元素 背后的 的背景持有图像的div ....如果你为包装div添加背景颜色，没有任何反应

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

＆＃13;

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

＆＃13;

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

＆＃13;

或者可能作为伪元素的背景：

＆＃13;

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;
}

＆＃13;

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

＆＃13;

CSS中的乘法模式？

3 个答案:

段

段