将图像与颜色混合的标准方法是使用以下 CSS:
background-image: url(photo.jpg);
background-color: red;
background-blend-mode: multiply;
我想在不使用 CSS 指定照片的情况下执行此操作，因为 IMG 已经由 Wordpress 主题的 PHP 生成，我不想弄乱它。
有没有办法将混合模式应用于 IMG，以便它与其父 DIV(或层次结构中更高的任何元素)混合？这样我就可以使用 CSS 将混合模式应用于 IMG，并将背景颜色应用于其父 DIV。 (我似乎无法直接将背景颜色应用于 IMG)。
谢谢!我希望这是有道理的。
最佳答案
您需要将 img 放入 div 中，如下所示:
<div class="container">
<img src="img.png" />
</div>
并将以下样式应用于父 div:(我使用 250x100 作为图像尺寸)
width: 250px;
height: 100px;
background-color: red;
img 的样式如下:(需要与上面相同的宽度和高度)
width: 25px;
height: 100px;
mix-blend-mode: multiply;
因此，您将父 div 的 background-color 与 img 进行mix-blend它位于父 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>关于html - 与父 DIV 的混合模式，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/70248618/