1

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

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

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

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

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

4

2 回答 2

2

你需要把img里面 a 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;

因此，您正在使用在 parent内部的mix-blendparent 。应该是这样的：background-colordivimgdiv

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

于 2021-12-06T16:40:26.343 回答
1

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

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

  • <img>在里面设置一个<div>

然后使用以下组合：

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

于 2021-12-06T16:57:48.213 回答