将CSS3线性渐变应用于跨度文本
|
在对我使用Lettering.js / Kern.js进行字距调整的文本应用渐变时遇到麻烦。这是皮包骨头的：
Lettering.js使用上升类将单词中的每个字符分成单独的跨度。从那里，您可以调整每个字母的边距，因此可以“字距调整”了！
我猜有两种解决方法..要么使用带有重复-x的透明图像并将其叠加（以下称为方法1），要么沿着仅webkit的道路使用webkit-gradient作为填充颜色（方法2）。至少从理论上来说...
两种方法都不适合我！
方法1-如何将图像仅应用于字母...而不是它们之间的负号。
方法2-我将渐变设置在什么属性下以填充文本
这是我的代码。谢谢！
HTML：
<header>
<h1>LARA</h1>
</header>
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)));
}
没有找到相关结果
已邀请:
1 个回复
羔磺
或使用SVG文字和渐变填充。 （顺便说一句，如果您仅使用Webkit，则可以使用CSS字母间距，而无需使用span来使内容混乱）