4

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

检查小提琴。这是不言自明的。

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

像这个例子

4

6 回答 6

6

您可以使用 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 蒙版

于 2013-09-14T15:43:00.800 回答
1

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

更新：虽然它只支持 webkit..

于 2013-09-10T07:42:49.957 回答
1

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

我正在总结这篇博文的要点

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

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

希望能帮助到你！:)

于 2013-09-13T12:15:03.723 回答
0

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

于 2013-09-10T07:41:26.297 回答
0

我不认为你在说什么是可能的......因为你有一个背景是渐变的父 div ，然后你有一个背景不透明但黑色的内部 div（）你已经在内部 div 上写了文本但想要字体的背景作为在父 div 中的渐变...这在使用 css/css3 时是不可行的 ...#000000

现在我可以向您展示 2 种方式（>=IE 9），您可以通过以下方式实现相同的风格，而您的标记和 css 几乎没有改变

选项 1:: (需要一些 Photoshop 工作)

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

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

选项 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;
}

活生生的例子

background-clip还要检查在 caniuse.com 的浏览器兼容性

选项 3::（为 IE8 制作这种风格）（这个过程很简单，直接但不聪明，因为它是 IE 特定的）

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

于 2013-09-13T15:08:04.663 回答
-1

试试这个 ：

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 */
于 2013-09-10T07:36:50.290 回答