2015-05-12 34 views
6

我的網站上有一個產品配置器。用戶可以在衣服上書寫單詞,並在產品圖像上顯示文字。如何在彩色文本上剪下背景(僅在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/

在此先感謝。

+2

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

+0

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

+0

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

回答

2

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

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; 



} 
0

您可以添加背景圖片的透明文本使用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; }

+0

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

0

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

#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'; 
} 
+0

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

+0

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

+0

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

相關問題