如何在不影响背景的情况下在CSS中执行文本渐变？

Question

我想在我的标题上使用文本渐变(基本上是这种类型的效果).通常,这是通过在文本上使用png alpha透明图像来实现的.我的解决方案的问题是在标题框内,alpha透明度也会影响背景.因此,例如,如果我想使用照片作为标题的背景,那么看起来很糟糕.有没有办法解决这个问题(至少在某些浏览器中,对于初学者来说).

Answer 1

使用CSS3没有办法做到这一点 - 即使是CSS3图像值和替换内容模块,虽然它包含许多与渐变有关的很酷的东西,但只允许你在可以使用图像的地方使用它们,而不是作为一种颜色.

但是,SVG确实允许你这样做,尽管在HTML中利用它有点工作.首先,创建包含渐变文本的SVG文档.你需要一个渐变:

<defs>
    <linearGradient id="heading_gradient" x1="0%" y1="0%" x2="0%" y2="100%">
        <stop offset="0%" style="stop-color:rgb(0,0,0); stop-opacity:1"/>
        <stop offset="100%" style="stop-color:rgb(0,0,0); stop-opacity:0.1"/>
    </linearGradient>
</defs>

并将一些文本应用于,注意fill属性:

<text x="0" y="100"
    font-family="sans-serif" font-weight="bold"  fill="url(#heading_gradient)" >
    <tspan font-size="100">A Big Heading</tspan>
</text>

然后,您需要在HTML中包含SVG.

<h1>
    <object data="heading-fill.svg" type="image/svg+xml" height="125" width="800">
        A Big Heading
    </object>
</h1>

请注意,如果没有SVG支持,标题应该回退到object标记中包含的内容,并且所有内容都应该是可访问的(我没有检查过).然后设置CSS,使后备内容与SVG匹配并添加背景图像:

h1 {
    font-size: 100px;
    font-family: sans-serif;
    background-image: url('daisy-grass-repeating-background.jpg');
}

这里有一个完整的例子,适用于Firefox 3.6/4,Chromium和Opera 11.01.它实际上并不是非常易读,但我会给您留下微调;)根据您想要支持的浏览器,您可能需要调查embed而不是object.