Question

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

检查FIDDLE。这是不言自明的。

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

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

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

CODE

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的渐变可以显示在透明文本上。

像this example

这样的东西

Answer 1

你可以使用SVG，它只是一点点，但它的跨浏览器兼容，并为您提供更多选择。

<强> Working Example

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

<强> Working Example 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]-->

它在现代浏览器中的外观：
enter image description here
以及IE8及以下版本的外观：

文档：
MDN SVG Gradients
MDN SVG Text
MDN Mask

Answer 2

我认为您正在寻找background-clip。问题是你需要使用图像，你不能使用css渐变afaik

更新：它仅在webkit上受支持..

Answer 3

以下技巧仅在您的文字/内容位于纯色背景上时才有效。

我总结了this blog post

中的观点

在文本容器中放置一个空的span，例如。 <h1> <span> </span> This this heading </h1>等。
将background-image [png]通过css嵌入此中 span
并在文字上绝对定位。

它在IE6开始工作，但IE PNG黑客是必需的！

希望它有所帮助！：）

Answer 4

IE中有两件事需要介绍

IE10 + ：

background: -ms-linear-gradient(top, #1e5799 0%,#207cca 27%,#2989d8 50%,#207cca 79%,#7db9e8 100%); /* IE10+ */
background: linear-gradient(to bottom, #1e5799 0%,#207cca 27%,#2989d8 50%,#207cca 79%,#7db9e8 100%); /* W3C */

对于 IE6-IE9 ：

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */

我认为您可以轻松更换颜色代码。我还建议您查看ColorZilla来生成CSS Gradient。

Answer 5

我不认为你说的是可能的......因为你有一个父div ，其背景为渐变，然后你有一个内部div < / strong>其背景为不透明但黑色（#000000）您是否在内部div 上写了文字，但希望字体的背景为渐变，这是在父div ...这不是使用css / css3 ...

的可能性
现在我可以通过以下方式向您展示2种方式（＆gt; = IE 9），您可以通过标记和css进行少量更改来实现相同的风格

选项1 :: （需要一些photoshop工作）

将<div>设置为<div>的背景黑色。然后创建渐变Photoshop工作（ex .png）。现在使用{{1将该图像设置为字体/文本背景}}

background-clip: text;

选项2 :: （上面的过程耗时很少..还有另一种更聪明的方法）

首先让webkit-background-clip: text; -moz-background-clip: text; background-clip: text;使用黑色背景然后在内部div中写入文本...将内部div的背景设置为渐变然后使用div

例如::

<强> MARK-UP

-webkit-background-clip: text;-webkit-text-fill-color: transparent;

<强> CSS

<div class="black"> <div class="a"> CAN YOU SEE THIS? THIS TEXT IS SUPPOSED TO TRANPARENT TO SHOW COLOR OF UNDERLYING DIV SO THAT IT LOOKS LIKE THE "HELLO WORLD" TEXT </div> </div>

<强> LIVE EXAMPLE

<强> ALSO CHECK BROWSER COMPATIBILITY OF background-clip AT caniuse.com

选项3 :: （为IE8制作此样式）（此过程简单，直接但不聪明，因为它是IE特定的）

创建一个Photoshop工作..制作一个具有渐变效果的文本..现在声明一个黑色背景的div ..并包含带有.black{ background:black; overflow:hidden; } .a{ background: #000000 -webkit-linear-gradient(red, green); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }标签的图像。：）

Answer 6

试试这个：

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#000000'); /* For < IE 7 */

-ms-filter : progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#000000'); /* For >= IE 8 */

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

6 个答案: