与父 DIV 混合模式答案

【问题标题】：Blend mode with parent DIV与父 DIV 混合模式
【发布时间】：2022-01-11 20:19:20
【问题描述】：

将图像与颜色混合的标准方法是使用以下 CSS：

background-image: url(photo.jpg);
background-color: red;
background-blend-mode: multiply;

我想不使用 CSS 来指定照片，因为 IMG 已经由 Wordpress 主题的 PHP 生成，我不想搞砸。

有没有一种方法可以将混合模式应用于 IMG，使其与其父 DIV（或层次结构更高的任何元素）混合？这样我就可以使用 CSS 将混合模式应用于 IMG，并将背景颜色应用于其父 DIV。（我似乎无法将背景颜色直接应用于 IMG）。

谢谢！我希望这是有道理的。

【问题讨论】：

可以直接混合图片：w3schools.com/cssref/css3_pr_filter.asp
有一个非背景的等价物：mix-blend-mode，可以在常规图像元素上使用，尽管浏览器支持不会回溯特别远，这可能是一个问题如果您需要处理旧版浏览器。
谢谢！ @Azu，CSS filter 属性似乎不支持“乘法”。我可以降低不透明度以使其混合，但这也会使其更轻。

标签： html css background-blend-mode

【解决方案1】：

您需要将img 放入div 中，如下所示：

<div class="container">
    <img src="img.png" />
</div>

并将以下样式应用于父 div：（我使用 250x100 作为图像尺寸）

width: 250px;
height: 100px;
background-color: red;

以及img 的以下样式：（需要与上面相同的width 和height）

width: 25px;
height: 100px;
mix-blend-mode: multiply;

所以你 mix-blending 父 div 的 background-color 与 img 是在父 div 内。应该是这样的：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        .container {
            width: 250px;
            height: 100px;
            background-color: red;
        }

        .container img {
            width: 250px;
            height: 100px;
            mix-blend-mode: multiply;
        }
    </style>
</head>
<body>
<div class="container">
    <img src="https://images.unsplash.com/photo-1633113089631-6456cccaadad?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80" />
</div>
</body>
</html>

【讨论】：

【解决方案2】：

如果您需要mix-blend-mode以外的浏览器兼容性...

您不会获得完全相同的视觉效果，但您可以：

在<div> 内设置<img>

然后使用以下组合：

background-color <div>

和：

filter: grayscale()
opacity

在<img>。

工作示例：

.test,
.test img {
  position: relative;
  float: left;
  width: 240px;
  height: 160px;
}

.test-1 {
  margin-right: 12px;
  background-image: url('https://picsum.photos/240/160');
  background-color: red;
  background-blend-mode: multiply;
}

.test-2 img {
  filter: grayscale(100);
  opacity: 0.5;
}

.test-2 {
  background-color: rgb(255, 0, 0);
}

<div class="test test-1" title="Test Image 1 (CSS background-image)"></div>

<div class="test test-2" title="Test Image 2 (HTML &lt;img&gt;)">
  <img src="https://picsum.photos/240/160" alt="Test Image 2" />
</div>

【讨论】：