Question

将渐变应用于我使用Lettering.js / Kern.js剪切的文本时遇到问题。这是瘦的：

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

我想有两种方法可以解决这个问题......要么使用带有repeat-x的透明图像并将其覆盖（以下称为方法1），要么只使用webkit-road并使用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)));
    }

Answer 1

您只需要使用魔法网络套件：

-webkit-background-clip: text

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

将CSS3线性渐变应用于跨越文本

1 个答案: