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

概述我正在尝试使用纯 HTML和CSS创建渐变文本.类似下面的文字 检查FIDDLE.这是自我解释. 我知道如何在webkit浏览器中实现这一点.但我需要一个跨浏览器的解决方案,它具有向后兼容性,直到IE8至少. 我知道如何生成渐变.这不是问题.在小提琴我只为webkit浏览器创建了渐变,但我知道如何为IE做它.我的主要问题是如何使文本透明,以便它显示底层div的渐变. 请不要使用JS / jQuer 我正在尝试使用纯 HTML和CSS创建渐变文本.类似下面的文字

检查FIDDLE.这是自我解释.

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

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

请不要使用Js / jquery解决方案.

码

HTML

<div ID="div1" ></div><div ID="div2" >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%,205,77,1) 50%,rgba(248,181,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,0.5);    position:absolute;}

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

像this example这样的东西

解决方法 你可以使用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 >    <div >        <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

总结

以上是内存溢出为你收集整理的html – 创建透明文本以显示底层div的渐变颜色全部内容，希望文章能够帮你解决html – 创建透明文本以显示底层div的渐变颜色所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。