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支持，标题应该回退到object标记中包含的内容，并且应该可以访问的所有内容（我还没有检查过）。然后设置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。

Answer 2

如果您只是在几个地方使用它，您可以简单地使用图像替换：

#the-h1
{
  background: url('the-h1.png') no-repeat left top;
  height: 1em;
  text-indent: 9001px;//it's over 9000
  overflow: hidden;
}

这不是一个很好的解决方案，因为您必须为要替换的每个标头创建一个图像，但它确实具有能够强制执行非常特定的字体和样式的好处。

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

2 个答案: