创建透明文本以显示底层div的渐变颜色 [英] Creating transparent text to show gradient color of underlying div

问题描述

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

检查

MDN SVG文字

MDN掩码

I am trying to create gradient text with plain HTML and CSS. Something like the text below

Check the FIDDLE. It is self explanatory.

I know how to achieve this in webkit-browsers only. But i need a Cross-browser solution which has backward compatibity till IE8 atleast.

I know how to generate the gradient. That is not an issue. In the fiddle i have only created gradient for webkit browsers but i know how to do it for IE too. My main issue is how can i make the text transparent so it shows me the gradient of the underlying div.

No JS/jQuery solutions please.

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

EDIT: I believe my question is not clear . I Know about gradients. I want my text to be transparent so that the gradient of the div below can be shown on the transparent text.

Something like this example

解决方案

You could use SVG, its a little outside the box, but its cross browser compatible and gives you some more options.

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>

Tested and working in Chrome, Firefox, and IE9

If you've really got your heart set on a cutout effect, it can also be done with 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>

Fall back for IE8 and below:

<!--[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]-->

The way it looks in modern browsers:

and how it looks in IE8 and below:

Documentation:
MDN SVG Gradients
MDN SVG Text
MDN Mask

这篇关于创建透明文本以显示底层div的渐变颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！