帶有彩色背景的不透明文字 - 僅限CSS

div有可能具有白色背景的不透明/透明文字。（div1（+）帶有彩色背景的不透明文字 - 僅限CSS

基本上我可以在第一個div（div1）後面有另一個彩色DIV（div2）並且文本將是純粹通過沒有JS的CSS的div背後的顏色（div2）。

2015-04-02 Jonathan Lee

可參照本：http://stackoverflow.com/questions/10835500/how-to-change-text-transparency-in-html-css – 2015-04-02 16:56:24

你要切出的文本？基本上你可以通過頂部div上文字的字母看到底層div的背景嗎？像這樣https://css-tricks.com/image-under-text/ – ferr 2015-04-02 16:59:47

這是你在找什麼？（讀答案）：http://stackoverflow.com/questions/13932946/transparent-text-with-white-background-with-css – 2015-04-02 17:05:39

如果我正確讀出你的問題，你想要做的就是使用文本通過第一個div衝並顯示其背後的第二個div的顏色或圖像內容。

沒有辦法只用CSS做到這一點。（至少這一天）

我想你可能會發現這很有用。

http://blog.ericzhang.com/punch-through-text-masks-with-css-and-html5/

來源

2015-04-02 17:31:58 mateostabio

就是這樣。所以不可能純粹與CSS？謝謝你的回答 – 2015-04-02 17:36:20

我沒有足夠的聲望讓你傷心。 – 2015-04-02 18:20:01

喜歡這個？

p{ 
 
    color: rgba(0,0,0,0.5); 
 
}

<p>Hello World!</p>

還是這樣嗎？

p{ 
 
    opacity: 0.5; 
 
}

<p>Hello World!</p>

或這樣嗎？

p { 
 
    position: relative; 
 
    color: rgba(255,255,255,0.5); 
 
    font-size: 30px; 
 
} 
 
p:before { 
 
    content: ''; 
 
    width: 100%; 
 
    height: 100%; 
 
    background: rgba(0,0,0,0.5); 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    z-index: -1; 
 
}

<p>Hello World!</p>

來源

2015-04-02 16:54:19 w3debugger

還沒有得到它 – 2015-04-02 16:57:40

我不認爲這是什麼OP問。他希望在純色背景中的文本是透明的，以便通過文本 – 2015-04-02 17:03:10

可以看到純色背後的內容。無論他想要什麼，他都可以通過「rgba」或「opacity」來實現此目的。我不認爲這可以通過任何其他方法完成。 – w3debugger 2015-04-02 17:11:47

帶有彩色背景的不透明文字 - 僅限CSS

回答

相關問題