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

Question

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

Answer 1

没有办法用 CSS3 做到这一点 - 即使是 CSS3 Image Values and Replaced Content Module , 虽然它包含很多与 gradients 有关的很酷的东西, 只允许您在可以使用图像而不是颜色的地方使用它们。

然而，SVG does let you do this ，尽管在 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 的情况下，标题应该退回到对象标签中包含的内容，并且所有内容应该 都可以访问(我还没有检查过)。然后设置 CSS，使回退内容应与 SVG 匹配并添加背景图片:

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

有 a full example here ，适用于 Firefox 3.6/4、Chromium 和 Opera 11.01。它实际上不是很可读，但我会把微调留给你；)根据你想要支持的浏览器，你可能需要调查 embed instead of object .