不能與前臺和後臺

Question

MWE這裏融合圖像：https://codepen.io/anon/pen/ZBVWBx

我想融合的徽標梯度，使：

• 漸變顏色圖像的唯一字母
• 圖像的背景（當前爲白色）與頁面的背景相匹配

這與the example here類似。

到目前爲止，我已經得到了他們兩個，但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>

我需要使用倒置使用一個單獨的文件爲標誌。如果您可以使用徽標的兩個版本，其中一個版本與另一個版本相反，則不會太棘手。

還要注意的是，在這個版本中，需要設置逆梯度的顏色（因爲所說的特技）