如何在CSS中的文本渐变而不影响背景？ [英] How can I do text gradient in CSS without affecting background?

问题描述

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

I would like to use a text gradient on my headers (this type of effect, basically). Commonly, this is achieved using png alpha-transparent image over the text. My problem with this solution is that within the header box alpha transparency will also influence the background. So if, for example, I wanted to use a photo as a background of my headers it would look awful. Is there a way around this (at least in some browsers, for starters).

推荐答案

这与CSS3 - 甚至 CSS3图像值和替换内容模块，虽然它包含很多的与渐变相关的酷炫功能，只允许您在哪里使用能够使用图片，而不是颜色。

There isn't a way to do this with CSS3 - even the CSS3 Image Values and Replaced Content Module, though it contains lots of cool stuff to do with gradients, only lets you use them where you would be able to use an image, not as a colour.

但是， SVG确实允许你这样做，虽然在HTML中利用它是有点工作。首先，使用梯度文本创建SVG文档。您需要一个渐变：

However, SVG does let you do this, though taking advantage of it in HTML is a bit of work. First, create the SVG document with your gradient text in it. You'll need a gradient:

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

并且有一些文本可以应用它，注意填充 attribute：

And some text to apply it to, notice the fill attribute:

<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。

Then you need to include the SVG in your HTML.

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

请注意，没有SVG支持，标题应该落回到对象标记内包含的内容 可以访问（我尚未选中）。然后设置CSS，使备用内容与SVG匹配，并添加背景图片：

Note that with no SVG support the heading should fall back to the content contained within the object tag and everything should be accessible (I haven't checked). Then set up the CSS so the fallback content should match the SVG and add the background image:

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 。

There's a full example here, works for me in Firefox 3.6/4, Chromium and Opera 11.01. It isn't actually very readable, but I'll leave the fine tuning to you ;) Depending on what browsers you want to support you may need to investigate embed instead of object.

这篇关于如何在CSS中的文本渐变而不影响背景？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！