ミックスブレンドモードの違い

Question

私はミックスブレンドモードを追加しようとしました。 「スパン」するが動作しない。

このソリューションは機能します： ".caption"に ".caption span"の代わりにブレンドモードを追加します。しかし、私が本当に必要とするのは、divにspanを入れることです。

なぜでしょうか？ありがとうございました！私の知る限りで

.caption { 
 
    position: absolute; 
 
    top: 10px; 
 
    left: 10px; 
 
    z-index: 99; 
 
    font-size: 62px; 
 
} 
 

 
.caption span { 
 
    color: #fff; 
 
    mix-blend-mode: difference; 
 
} 
 

 
.background-image { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    pointer-events: none; 
 
    overflow: hidden; 
 
    z-index: 0; 
 
} 
 

 
.background-image img { 
 
    object-fit: cover; 
 
    width: 100%; 
 
    height: 100%; 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
}

<div class="row"> 
 

 
    <div class="row-inner"> 
 

 
    <div class="caption"> 
 
     <span class="test">Headline</span> 
 
    </div> 
 

 
    </div> 
 

 
    <div class="background-image"> 
 
    <img src="https://www.smashingmagazine.com/wp-content/uploads/2015/06/10-dithering-opt.jpg"> 
 
    </div> 
 

 

 
</div>

Answer 1

、唯一の方法は、mix-blend-modeを使用することですあなたのためのサンプルを働い同じ<div>

に<span>と<img>を置くことによってです。

span { 
 
    color: #fff; 
 
    mix-blend-mode: difference; 
 
    position: absolute; 
 
    top: 10px; 
 
    left: 10px; 
 
    z-index: 99; 
 
    font-size: 62px; 
 
} 
 

 
.background-image { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    pointer-events: none; 
 
    overflow: hidden; 
 
    z-index: 0; 
 
} 
 

 
.background-image img { 
 
    object-fit: cover; 
 
    width: 100%; 
 
    height: 100%; 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
}

<div class="row"> 
 
    <div class="background-image"> 
 
    <span class="test">Headline</span> 
 
    <img src="https://www.smashingmagazine.com/wp-content/uploads/2015/06/10-dithering-opt.jpg"> 
 
    </div> 
 

 

 
</div>

もう一つの方法は、画像に ラッパーのdivの backgroundを設定することであり、それが動作します。

私はこれがあなたに役立つことを願っています。グレートこのlink

/* Keyword values */ 
mix-blend-mode: normal; 
mix-blend-mode: multiply; 
mix-blend-mode: screen; 
mix-blend-mode: overlay; 
mix-blend-mode: darken; 
mix-blend-mode: lighten; 
mix-blend-mode: color-dodge; 
mix-blend-mode: color-burn; 
mix-blend-mode: hard-light; 
mix-blend-mode: soft-light; 
mix-blend-mode: difference; 
mix-blend-mode: exclusion; 
mix-blend-mode: hue; 
mix-blend-mode: saturation; 
mix-blend-mode: color; 
mix-blend-mode: luminosity; 

/* Global values */ 
mix-blend-mode: initial; 
mix-blend-mode: inherit; 
mix-blend-mode: unset;