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

Question

Having trouble applying a gradient to text that I kerned with Lettering.js/Kern.js. Here's the skinny:

Lettering.js separates each character in the word into separate spans with ascending classes. From there, you can adjust each letter's margin, therefore "kerning" it!

I guess there are two ways to go about it.. either using a transparent image with repeat-x and overlay it (hereafter method 1), or going down the webkit-only road and use a webkit-gradient as the fill color (method 2). At least theoretically speaking...

Neither way is working for me!

Method 1- How can I apply the image to ONLY the letters... instead of the negative space inbetween as well.

Method 2- what attribute do I set the gradient under to fill the text

Here's my code.. Thank you!

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

You need to use the magical webkit only:

-webkit-background-clip: text

or use SVG text and a gradient fill. (BTW You can use CSS letter spacing if you're doing webkit only, no need to clutter up your stuff with spans)