如何在彩色文本上剪下背景（僅在CSS中）

我的網站上有一個產品配置器。用戶可以在衣服上書寫單詞，並在產品圖像上顯示文字。如何在彩色文本上剪下背景（僅在CSS中）

我想讓這個文字看起來像刺繡。所以我把一個文字陰影，文字的顏色在產品顏色的功能上發生了變化，但是現在，我想把一個「過濾器」放在顏色上。

約束：我只能訪問CSS。

這裏有一個小提琴我所做的：

#text 
{ 
    font-size:90px; 
    text-align:center; 
    font-family:'petit_formal_script'; 
    -webkit-font-smoothing:antialiased; 
    text-shadow: 2px 2px 2px black; 
    color:lightblue; 
} 

#text:after 
{ 
    content:''; 
    position:absolute; 
    left:0; 
    top:0; 
    right:0; 
    bottom:0; 
    background-image:url('http://hdwbin.com/wp-content/uploads/2014/11/red-background.jpg'); 
    -webkit-background-clip:text; 
    -moz-background-clip:text; 
    -webkit-text-fill-color:transparent; 
}

http://jsfiddle.net/u2to713t/

在此先感謝。

來源

2015-05-12 Adrien QUINT

難道你也許提供你想要的文字看起來像一個例子畫面？ – NachoDawg

試試這裏：https://css-tricks.com/clipping-masking-css/ – Andrew

http://jsfiddle.net/u2to713t/4/ 我希望文字看起來像這樣。但背景剪輯到文本：/ 謝謝 –

我終於做到了.. 結果不出我所料，但它的工作原理。下面是一個誰都會嘗試一天做同樣的事情最終小提琴：

http://jsfiddle.net/u2to713t/13/

#text 
{ 
    font-size:90px; 
    text-align:center; 
    font-family:'petit_formal_script'; 
    -webkit-font-smoothing:antialiased; 
    text-shadow: 1px 2px 3px #474747; 
    color:lightblue; 
} 

#text:before 
{ 
    content: attr(data-text); 
    position:absolute; 
    left:-1px; 
    top:7px; 
    right:0; 
    bottom:0; 
    opacity:1.0; 
    z-index: 1; 
    color:transparent; 
    text-shadow:0px 0px 0px; 
    background:url("http://image.noelshack.com/fichiers/2015/20/1431421588-brodrwhite.png"); 
    -webkit-background-clip:text; 
    -moz-background-clip:text; 
    background-clip:text; 



}

來源

2015-05-12 14:22:52

您可以添加背景圖片的透明文本使用RGBA

#text{ font-size:90px; text-align:center; font-family:'petit_formal_script'; -webkit-font-smoothing:antialiased; text-shadow: 2px 2px 2px rgba(0,0,0,0.5); color:transparent; background-image:url('http://hdwbin.com/wp-content/uploads/2014/11/red-background.jpg'); -webkit-background-clip:text; -moz-background-clip:text; -webkit-text-fill-color:transparent; }

來源

2015-05-12 13:16:54

你好Ahmd，這種解決方案是不可能的。顏色是由用戶自動設置的，他可以改變他想穿在他身上的文字的顏色 –

透明文字陰影這是什麼ü意味着什麼呢？

#text { 
    background: url(http://image.noelshack.com/fichiers/2015/20/1431421588-brodrwhite.png) repeat; 
    -webkit-background-clip: text; 
    -webkit-text-fill-color: transparent; 
    font-size:90px; 
    text-align:center; 
    font-family:'petit_formal_script'; 
}

來源

2015-05-12 13:54:21

Hello Panto Andjelic，不是，我有一張不透明的背景圖片。你可以在這裏看到：\t jsfiddle.net/u2to713t/4 問題是，我想堆疊它們以獲得文本顏色+過濾器。謝謝。 –

我不認爲我得到它對不起。我做了編輯，但仍然不明白對不起。 –

不要對不起，謝謝你給我你的時間。 –

如何在彩色文本上剪下背景（僅在CSS中）

回答

相關問題