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

Question

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

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

我只知道如何在 webkit-browsers 中实现这一点。但我需要一个至少向后兼容到 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的渐变就可以显示在透明文字上。

类似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]-->

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

以及它在 IE8 及以下版本中的外观：

文档：
MDN SVG Gradients
MDN SVG Text
MDN Mask

Answer 2

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

更新： 不过它只在 webkit 上受支持..

Answer 3

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

我正在总结来自this blog post的要点

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

它适用于 IE6 及更高版本，但需要 IE PNG hack！

希望对您有所帮助！ :)

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

Answer 5

我不认为你说的是​​可能的...因为你有一个 parent div 其背景是 gradient 然后你有一个 inner div 其背景是不透明但黑色 (#000000) 你已经在 inner div 上写了文本，但希望 字体的背景是在父级中的渐变div...这在使用 css/css3 时是不可行的...

现在我可以向您展示 2 种方法 (>=IE 9)，您可以按照这些方法实现相同的样式，而无需更改标记和 css

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

有一个<div> 设置<div> 的背景为黑色。然后创建渐变Photoshop 作品（例如.png）。现在使用background-clip: text; 将该图像设置为字体/文本背景

webkit-background-clip: text;
-moz-background-clip: text;
background-clip: text;

OPTION 2::（上述过程很耗时..还有另一种更聪明的方法）

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

例如 ::

标记

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

CSS

.black{
    background:black;
    overflow:hidden;
 }

.a{
background: #000000 -webkit-linear-gradient(red, green);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

LIVE EXAMPLE

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

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

创建一个photoshop作品..制作一个带有渐变效果的文本..现在声明一个黑色背景的div..并使用<img src="" />标签包含该图像。 :)

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