创建透明文本以显示底层div的渐变颜色

Question

我正在尝试使用纯HTML和CSS创建渐变文本.类似下面的文字

检查FIDDLE.这是自我解释的.

我知道如何在webkit浏览器中实现这一点.但我需要一个跨浏览器的解决方案,它具有向后兼容性,直到IE8至少.

我知道如何生成渐变.这不是问题.在小提琴我只为webkit浏览器创建了渐变,但我知道如何为IE做它.我的主要问题是如何使文本透明,以便它显示底层div的渐变.

请不要使用JS/jQuery解决方案.

码

HTML

<div id="div1" style="width:200px;height:200px"></div>
<div id="div2" style="width:200px;height:200px">CAN YOU SEE THIS? THIS TEXT IS SUPPOSED TO HAVE COLORED GRADIENTS LIKE THE HELLO WORLD TEXT</div>

CSS

#div1 {
    /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(45deg, rgba(252, 234, 187, 1) 0%, rgba(252, 205, 77, 1) 50%, rgba(248, 181, 0, 1) 51%, rgba(251, 223, 147, 1) 100%);
}
#div1 {
    z-index:-100;
    position:absolute;
    left:0px;
    top:0px;
}
#div2 {
    z-index:100;
    left:10px;
    top:10px;
    background: black;
    text-align:center;
    font-size:20px;
    color: rgba(255, 255, 255, 0.5);
    position:absolute;
}

编辑:我相信我的问题不明确.我知道渐变.我希望我的文本是透明的,以便下面div的渐变可以显示在透明文本上.

像这个例子

Answer 1

你可以使用SVG,它只是一个小盒子,但它的跨浏览器兼容,并为您提供更多选择.

工作实例

<svg height="50">
    <linearGradient id="g1" x="0%" y="100%">
        <stop stop-color="blue" offset="0%" />
        <stop stop-color="green" offset="25%" />
        <stop stop-color="yellow" offset="50%" />
        <stop stop-color="orange" offset="75%" />
        <stop stop-color="red" offset="100%" />
    </linearGradient>
    <text font-size="40" fill="url(#g1)">
        <tspan x="10" y="40">Hello World!</tspan>
    </text>
</svg>

在Chrome,Firefox和IE9中经过测试和使用

如果你真的已经设定了剪切效果,那么它也可以用SVG完成.

工作实例2

<div class="wrap">
    <div class="black">
        <svg width="300" height="100">
            <mask id="cutouttext">
                <rect width="280" height="50" x="0" y="15" fill="white" />
                <text x="50%" y="55%" text-anchor="middle" font-size="48">Hello World</text>
            </mask>
            <rect width="280" height="50" x="25" y="15" fill="black" mask="url(#cutouttext)" />
        </svg>
    </div>
</div>

回归IE8及以下版本:

<!--[if lt IE 9]>
    <style>
        .wrap {
            color: #ff0000;
            font-size:48px;
            text-align: center;
            padding-top: 10px;
            height: 90px;
        }
        .black {
            background: black;
            margin: 0 auto;
            width:250px;
        }
    </style>
<![endif]-->

它在现代浏览器中的外观:

以及IE8及以下版本的外观:

文档:
MDN SVG渐变
MDN SVG文本
MDN掩码