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

时间:2011-03-07 16:24:07

标签: css css3 gradient

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

2 个答案:

答案 0 :(得分:5)

使用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

答案 1 :(得分:1)

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

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

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