将 CSS3 线性渐变应用于跨度文本答案

【问题标题】：apply CSS3 linear gradient to span'd text将 CSS3 线性渐变应用于跨度文本
【发布时间】：2011-05-24 04:02:04
【问题描述】：

无法对使用 Lettering.js/Kern.js 紧缩的文本应用渐变。这是瘦的：

Lettering.js 将单词中的每个字符分隔为具有升序类的单独跨度。从那里，您可以调整每个字母的边距，从而“调整”它！

我想有两种方法可以解决它。或者使用带有 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)));
    }

【问题讨论】：

标签： css webkit gradient font-face html

【解决方案1】：

您只需要使用神奇的 webkit：

-webkit-background-clip: text

或使用 SVG 文本和渐变填充。（顺便说一句，如果你只做 webkit，你可以使用 CSS 字母间距，不需要用 span 把你的东西弄乱）

【讨论】：