[英]apply CSS3 linear gradient to span'd text
无法对使用 Lettering.js/Kern.js 紧缩的文本应用渐变。 下面是瘦身:
Lettering.js 将单词中的每个字符分成具有升序类的单独跨度。 从那里,您可以调整每个字母的边距,因此“紧缩”它!
我想有两种方法可以 go 关于它.. 使用带有 repeat-x 的透明图像并覆盖它(以下称为方法 1),或者沿着 webkit-only 道路使用 webkit-gradient 作为填充颜色(方法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)));
}
您只需要使用神奇的 webkit:
-webkit-background-clip: text
或使用 SVG 文本和渐变填充。 (顺便说一句,如果你只做 webkit,你可以使用 CSS 字母间距,不需要用跨度把你的东西弄乱)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.