如何應用反文本掩碼與CSS

Question

我會嘗試用圖像解釋我的問題。開始了。

1 - 此圖片顯示文本掩蔽的圖像，到目前爲止好，我可以用下面的代碼做：

font-size: 120px; 
background: url(image-to-be-masked.jpg) repeat 0 0, white; 
-webkit-background-clip: text; 
-webkit-text-fill-color: transparent; 

2 - 這其他圖像，文本創建相反的效果，只留下透明的文字區域。這就是我想要的：

有沒有人嘗試過嗎？

Answer 1

我不認爲CSS可以做到這一點。但是你可以破解它一起使用三種不同的嵌套元素：

• 最外層的元素包含背景圖像
• 中間元素包含中間圖像
• 內部元件包含文本，並具有相同的背景圖像作爲最外層的元素，與第一個示例中的background-clip:text;一樣被屏蔽。

這可以工作，但有點麻煩，因爲你必須補償蒙版背景位置才能達到預期的效果。這裏是一個例子：http://jsfiddle.net/dzkTE/。

Answer 2

[抱歉，我誤解了這個。我試了一下，認爲：P] 我認爲你可以通過使用背景剪輯。

background-clip:text; 

檢查here（請在Chrome嘗試或增加供應商前綴）。你可以檢查demo page表格chris。

Answer 3

我設法用幾種不同的方法來達到這個目的。 見我的答案在這裏：https://stackoverflow.com/a/32476482/2315496

見下圖：

有三種方式你在找什麼在HTML/CSS/JavaScript的，略有些比其他人更哈克。

1. 使用<canvas>繪製你的形狀和類型，並設置ctx.globalCompositeOperation="xor";其中ctx是你的畫布背景。

var c=document.getElementById('myCanvas'); 
 
var ctx=c.getContext('2d'); 
 
ctx.font = "bold 36px Proxima Nova"; 
 
ctx.fillStyle='blue'; 
 
ctx.fillText("MORE",100,87); 
 
ctx.globalCompositeOperation='xor'; 
 
ctx.beginPath(); 
 
ctx.fillStyle='white'; 
 
ctx.arc(150,75,75,0,2*Math.PI); 
 
ctx.fill();

body{ 
 
    background: -webkit-radial-gradient(top left,rgb(23, 39, 34) 4%,rgb(56, 99, 99) 37%,rgb(22, 27, 15) 73%,rgb(22, 27, 14) 93%,#232323 100%); 
 
    width:100%; 
 
    height:100%; 
 
} 
 

 
html{ 
 
    height:100% 
 
}

<canvas id='myCanvas'></canvas>

使用mix-blend-mode: screen和設置文本到黑的顏色。

.blend-mode { 
 
    background:white; 
 
    border-radius:100%; 
 
    width:150px; 
 
    height:150px; 
 
    line-height:155px; 
 
    float:left; 
 
    margin:20px; 
 
    font-family: "Proxima Nova", Hevetica, sans-serif; 
 
    font-weight:bold; 
 
    color:black; 
 
    text-align:center; 
 
    vertical-align:middle; 
 
    font-size:36px; 
 
    mix-blend-mode: screen; 
 
} 
 

 
body{ 
 
    background: -webkit-radial-gradient(top left,rgb(23, 39, 34) 4%,rgb(56, 99, 99) 37%,rgb(22, 27, 15) 73%,rgb(22, 27, 14) 93%,#232323 100%); 
 
    width:100%; 
 
    height:100%; 
 
} 
 

 
html{ 
 
    height:100%; 
 
}

<div class="blend-mode">MORE</div>

使用-webkit-text-fill-color:transparent和-webkit-background-clip:text揭示它後面的背景的副本。這需要對背景副本進行一些調整以匹配「原始」背景。

.wrap{ 
 
    margin:20px; 
 
    float:left; 
 
    position:relative; 
 
} 
 

 
.background { 
 
    width: 150px; 
 
    height: 150px; 
 
    border-radius: 100%; 
 
    background: white; 
 
    position:absolute; 
 
    top:0; 
 
    left:0; 
 
    z-index:4; 
 
    
 
} 
 

 
.text { 
 
    position:absolute; 
 
    top: 25px; 
 
    left: 25px; 
 
    z-index:5; 
 
    background: -webkit-radial-gradient(top left, rgb(23, 39, 34) 4%, rgb(56, 99, 99) 37%, rgb(22, 27, 15) 73%, rgb(22, 27, 14) 93%, #232323 100%); 
 
    font-family: Proxima Nova, Helvetica, sans-serif; 
 
    font-weight:bold; 
 
    line-height:100px; 
 
    font-size: 36px; 
 
    color: #666; 
 
    -webkit-background-clip: text; 
 
    -webkit-text-fill-color: transparent; 
 
} 
 

 
body{ 
 
    background: -webkit-radial-gradient(top left,rgb(23, 39, 34) 4%,rgb(56, 99, 99) 37%,rgb(22, 27, 15) 73%,rgb(22, 27, 14) 93%,#232323 100%); 
 
    width:100%; 
 
    height:100%; 
 
} 
 

 
html{ 
 
    height:100%; 
 
}

<div class="wrap"> 
 
    <div class="background"></div> 
 
    <div class="text">MORE</div> 
 
</div>

這些都不是容易的工作，以及跨瀏覽器，我沒有測試過！