與父DIV的混合模式-有解無憂

將影像與顏色混合的標準方法是使用以下 CSS：

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

我想在不使用 CSS 指定照片的情況下執行此操作，因為 IMG 已經由 Wordpress 主題的 PHP 生成，我不想弄亂。

有沒有辦法將混合模式應用于 IMG，以便它與其父 DIV（或層次結構更高的任何元素）混合？這樣我就可以使用 CSS 將混合模式應用于 IMG 并將背景顏色應用于其父 DIV。（我似乎無法將背景顏色直接應用于 IMG）。

謝謝！我希望這是有道理的。

uj5u.com熱心網友回復：

你需要把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;

所以你mix-blend荷蘭國際集團的background-color母公司div與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>

uj5u.com熱心網友回復：

如果您需要瀏覽器兼容性超出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>

轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/375073.html

標籤：html css 背景混合模式

上一篇：如何使sass按鈕修飾符類更通用

下一篇：如何在頁面加載時觸發Javascript輪播的自動播放？