CSS背景圖片上的文字效果+文字陰影效果

我很容易找到ressources創建一個淘汰賽的文字效果，但這裏的挑戰是經典的基因敲除文字效果like this與內文字陰影和透明度結合起來，讓背景圖像中可見。

允許實驗規則。 SVG太，但我更喜歡CSS :)

2016-03-10 mr-wildcard

的可能的複製[我可以做敲出/穿通與CSS字體的透明度？（http://stackoverflow.com/questions/2289159/can-i-do -knock-out-punch-through-transparency-with-css-fonts） – LGSon

謝謝你們。我更新了我的帖子。我想結合淘汰賽文字效果和文字陰影。我不認爲這是重複的。 –

哦，我嘗試了很多可能性，並在Google和CodePen上做了大量的研究。 –

從獵人特納答案開始，有可能以0比改進。通過這種方式，容器的背景圖像可以混合到文本中，從而產生你想要做的事情。但是，請記住它hasn't broad support yet。

html, body { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.container { 
 
    width: 400px; 
 
    height: 200px; 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
    background: url('http://www.designbolts.com/wp-content/uploads/2013/02/Free-Seamless-Wood-Textures-Patterns-For-3D-Mapping-2.jpg'); 
 
    background-size: contain; 
 
} 
 

 
.container p { 
 
    font-weight: bold; 
 
    font-size: 60px; 
 
    font-family: Helvetica, Arial, sans-serif; 
 
    color: rgba(255, 255, 255, .45); 
 
    text-shadow: 4px 4px 6px #fff, 0 0 0 #000, 4px 4px 6px #fff; 
 
    mix-blend-mode: multiply; 
 
}

<div class="container"> 
 
    <p>Hello World</p> 
 
</div>

來源

2016-03-10 18:16:11

這太棒了。爲什麼我之前沒有考慮混合模式:)謝謝。 –

很好的答案！不知道混合混合模式：D –

你可以通過使用rgba()爲顏色，配對text-shadow。

CSS

color: rgba(255,0,0, 0.4); 
text-shadow: 4px 4px 6px red, 0 0 0 #000, 4px 4px 6px red;

例

html,body { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.container { 
 
    background-color: red; 
 
    width: 400px; 
 
    height: 200px; 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
} 
 

 
.container p { 
 
    font-weight: bold; 
 
    font-size: 60px; 
 
    font-family: Helvetica, Arial, sans-serif; 
 
    color: rgba(255,0,0, 0.4); 
 
    text-shadow: 4px 4px 6px red, 0 0 0 #000, 4px 4px 6px red; 
 
}

<div class="container"> 
 
    <p>Hello World</p> 
 
</div>

來源

2016-03-10 17:45:08

謝謝！這也是我迄今取得的成就，但問題是我需要在文本背後有一個非固定的背景。 –

是的，這是一個問題。你的背景似乎幾乎都是一種顏色。也許你可以做一些事情[像這樣]（https://jsfiddle.net/ndebq1c9/）並定位背景，以便文本處於最中立的部分。我知道這並不理想，但正如我所說，我認爲這可能是您用CSS做的最好的，但我會繼續尋找更好的解決方案。 –

是的，我也試着用'background-clip'在文本中放置相同的背景，但是這不能與'text-shadow'結合。可悲的是，這純粹的CSS似乎不可行:) –

CSS背景圖片上的文字效果+文字陰影效果

回答

相關問題