はここに、前景と背景

Question

MWEとのイメージをブレンドすることはできません

• グラデーションカラー画像の文字のみ
• 画像の背景（現在白）がページの背景と一致する

これはthe example hereと似ています。

は、これまでのところ、私はそれらのうちの2つを持っているが、separatedly：

.amyspark-logo-1 { /* background */ 
    background: url('https://i.imgur.com/CZUynhW.png'); 
    background-size: 100%; 
    height: 10rem; 
    mix-blend-mode: overlay; 
} 

.amyspark-logo-2 { /* logo + gradient */ 
    background: url('https://i.imgur.com/CZUynhW.png'), linear-gradient(pink, red); 
    background-size: 100%; 
    height: 10rem; 
    background-blend-mode: screen; 
} 

はそれを行うことができますか？私はロゴに透明なイメージを使用しようとしましたが、それは完全にbackground-blend-modeを破ります。

Answer 1

これは反転を使用して、少しトリッキーなレイアウトを行うことができます。

.container { 
 
    width: 600px; 
 
    height: 400px; 
 
    border: solid 1px red; 
 
    position: relative; 
 
    background-image: url(http://lorempixel.com/400/200); 
 
    background-size: cover; 
 
} 
 

 
.element { 
 
    width: 100%; 
 
    height: 100%; 
 
    border: solid 1px green; 
 
    position: absolute; 
 
    top: 0px; 
 
    background-size: cover; 
 
} 
 

 
.white { 
 
    background-image: url(https://i.stack.imgur.com/C4CyU.jpg); 
 
    mix-blend-mode: multiply; 
 
} 
 

 
.black { 
 
    background-image: linear-gradient(cyan, yellow), url(https://i.stack.imgur.com/C4CyU.jpg); 
 
    background-blend-mode: screen; 
 
    filter: invert(1); 
 
    mix-blend-mode: screen; 
 
}

<div class="container"> 
 
<div class="element white"></div> 
 
<div class="element black"></div> 
 
</div>

私はロゴのための単一のファイルを使用するように反転を使用する必要があります。 2つのバージョンのロゴを使用することができれば、もう一方のバージョンと逆のバージョンを使用することは難しいでしょう。

注意はまた、このバージョンでは、グラデーションの色が（なぜなら、前記トリック）

逆に設定する必要があります