將CSS3線性漸變應用於跨度文本

難以將漸變應用於使用Lettering.js/Kern.js處理的文本。以下是精簡版：將CSS3線性漸變應用於跨度文本

Lettering.js將單詞中的每個字符分隔爲具有上升類的單獨跨度。從那裏，你可以調整每個字母的邊距，因此「改變」它！

我想有兩種方法可以去解決這個問題。或者使用帶有repeat-x的透明圖像並覆蓋它（以下稱爲方法1），或者沿着僅用於webkit的道路並使用webkit漸變作爲填充顏色（方法2）。至少從理論上講......

兩種方式都不適合我！

方法1-如何將圖像僅應用於字母......而不是中間的負面空間。

方法2-什麼屬性做我設置了梯度下，以填補文本

這裏是我的代碼..謝謝！

HTML：

<header> 
    <h1>LARA</h1> 
</header>

CSS：

h1 { 
     font-family:FuturaStdExtraBold; 
     font-size:200px; 
     font-weight:normal; 
     font-style:normal; 
     color:#333e52; 
     //Method 1 
     background: url(../img/overlay_light.png) repeat-x; 
     text-shadow: 0 1px 3px rgba(0,0,0,1); 
     //Method 2 
     //-webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(27,33,44,1)), color-stop(50%, rgba(255,255,255,1)), to(rgba(27,33,44,1))); 
    }

來源

2011-05-24 technopeasant

您只需要使用神奇的webkit：

-webkit-background-clip: text

或使用SVG的文本和漸變填充。（順便說一句，如果你只是在使用webkit，你可以使用CSS字母間隔，不需要使用跨度將你的東西弄亂）

來源

2011-05-24 20:05:53

將CSS3線性漸變應用於跨度文本

回答

相關問題