ブレンディングモードCSS3

Question

ブレンディングモードの画像にthisのような文字を実装しようとしています。ここで

は私のfiddle

<div id="box"> 
    <div id="image"> 
    <img src="https://www.epicurrence.com/images/speakers/julie.jpg" /> 
    </div> 
    <div id="overlay">J</div> 
</div> 

はそれを動作させることはできませんです。

Answer 1

imgには現在background-blend-modeが使用されています。 background-blend-modeは、同じ要素に複数の背景画像またはの色をブレンドするために使用されます。

mix-blend-modeは、スタックされた任意の要素にブレンドを適用できます。あなたの場合、一番上の要素（.overlay）にmix-blend-modeを使用する必要があります。

#box { 
 
    height: 1000px; 
 
    background-color: white; 
 
} 
 

 
#image img { 
 
    position: relative; 
 
} 
 

 
#overlay { 
 
    color: green; 
 
    position: absolute; 
 
    bottom: -300px; 
 
    font-size: 1000px; 
 
    text-transform: uppercase; 
 
    transition: transform 0.9s ease-in-out; 
 
    mix-blend-mode: multiply; 
 
}

<div id="box"> 
 
    <div id="image"> 
 
    <img src="https://www.epicurrence.com/images/speakers/julie.jpg" /> 
 
    </div> 
 
    <div id="overlay">J</div> 
 
</div>