parent DIV 的混合模式

Question

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

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

我想在不使用 CSS 指定照片的情况下执行此操作，因为 IMG 已经由 Wordpress 主题的 PHP 生成，我不想弄乱它.

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

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

Answer 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-blend 将父 div 的 background-color 与父 div 中的 img 相结合。应如下所示：

<!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>

Answer 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>

parent DIV 的混合模式

Blend mode with parent DIV

html

css

background-blend-mode