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

【问题标题】：How can I do text gradient in CSS without affecting background?如何在不影响背景的情况下在 CSS 中进行文本渐变？
【发布时间】：2011-03-07 16:24:07
【问题描述】：

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

【问题讨论】：

您能否发布一个简单的演示（jsfiddle.net 或jsbin.com）来说明使用透明 PNG 技术的问题？只是背景开始透过文字显示出来吗？
问题是这种效果只有在你有纯色背景时才有用。我需要一些可以在任何背景上工作的东西，包括图像背景......我怀疑这是可能的:-(
你愿意使用 JavaScript 来做这件事吗？我正在考虑的方法，没有 JS 的用户（不是 这么多 他们）只会得到没有渐变的文本。
我不介意，无论如何，我的应用对于没有 JavaScript 的人来说几乎毫无用处。我欢迎任何建议。
我打算用Raphaël写一个答案。这是一个在文本上显示渐变的随机示例：http://raphaeljs.com/fonts.html - 我需要一些努力才能正确写出答案。我应该这样做吗？

标签： css gradient

【解决方案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。

【讨论】：

我本来打算建议使用 SVG 解决方案，但看起来我已经被打败了。 +1 看起来不错的答案。
非常好的答案，谢谢！是否可以将这段 svg 内联到实际页面中，这样我就不必为每个标题下载一个额外的文档？我需要将其应用于一页上的许多不同标题。
@VoY 只有在用户拥有兼容 HTML5 的解析器（如 Firefox 4.0 beta、最近的 Chrome、Opera 11.50 alpha、IE9）时，您才能内联。您也许可以使用Data URIs，不确定它是否适用于object，但内联的唯一其他选项是svgweb，但这会增加自己的开销。

【解决方案2】：

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

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

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

【讨论】：