是否可以將css混合模式應用於不同div中的元素？

是否可以將css混合模式應用於不同div中的元素？是否可以將css混合模式應用於不同div中的元素？

例如，我有一個div的大背景英雄圖像。在圖片上方（不同的div），我有一個藍色的半透明盒子，裏面有文字。這個透明的盒子是我想應用混合，但它似乎無法正常工作，也許是因爲他們不在同一個div中，就像https://css-tricks.com/basics-css-blend-modes/

我在wordpress中工作，所以它會是一個有點難以重新構造HTML，以便將圖像和彩色框放在同一個div中。

有沒有人知道我可以用來實現這種方法的技巧？

在此先感謝！

來源

2016-10-18 Sam Mcleod

你想橫跨整個橫幅圖像的藍色背景或只是文本？ –

這裏有一個竅門：

，你可以在一個DIV添加這兩個div的。然後在CSS您可以添加一個div的兩個背景。這樣，您可以使用屬性來混合這兩個圖像。

下面是一個例子：https://jsfiddle.net/4mgt8occ/3/

來源

2016-10-18 04:30:14

使用mix-blend-mode。

DEMO：

http://plnkr.co/edit/R5TBohMs1jKfsPj7zcXt?p=preview

有兩種使用混合-模式有兩種：

background-blend-mode：如果兩個背景都在同一個div，則該屬性可用過的。
mix-blend-mode：當您想混合2種不同元素的背景時，則可以使用mix-blend-mode屬性。

代碼：

HTML：

<div class="wrapper"> 
    <div class="first"></div> 
    <div class="second"></div> 
</div>

CSS：

div.wrapper { 
    position: relative; 
} 
div.first, 
div.second { 
    width: 300px; 
    height: 200px; 
    position: absolute; 
} 
div.first { 
    background: url(http://images.all-free-download.com/images/graphicthumb/male_lion_193754.jpg) 0 0 no-repeat; 
    z-index: 9; 
    top: 0px; 
    left: 0px; 
} 
div.second { 
    background: url(http://images.all-free-download.com/images/graphicthumb/canford_school_drive_dorset_514492.jpg) 0 0 no-repeat; 
    z-index: 10; 
    mix-blend-mode: difference; 
    top: 30px; 
    left: 120px; 
}

來源

2016-10-18 04:40:35

您可以使用：後或：之前在IMG創建另一個元素-div。然後用rgba()設置背景顏色。這裏的0.2是背景顏色的不透明度。對於文本div，你不需要做任何事情。

div#wrapper::after { 
    background-color: rgba(216, 223, 228, 0.2); 
    display: block; 
    width: 100%; 
    height: 100%; 
    content: ' '; 
}

來源

2016-10-18 04:49:50

是否可以將css混合模式應用於不同div中的元素？

回答

相關問題