CSS文字颜色渐变IE的不兼容处理

CSS文字颜色渐变IE的不兼容处理

在布局页面做字体颜色渐变时，发现谷歌支持 放到IE就不行了， 后来查资料知道是 background-clip:text的问题 ie不支持。

演示代码：

 div {
            color: transparent;
            display: inline-block;
            font-size: 30px;
            font-family: '微软雅黑';
            background-image: -webkit-linear-gradient(right, green, red);
            background-image: linear-gradient(to right, green, red);
            -webkit-background-clip: text;
        }

效果：

在Google正常显示：

在IE就变成颜色块了：

解决办法：通过SVG实现线性渐变，在IE下也可以完美实现效果。

代码块：

 <svg height='auto' width='auto'>
        <defs>
            <linearGradient id="grad" x1="0%" y1="0%" x2="0%" y2="100%">
                <stop offset="0%" style="stop-color:green; stop-opacity:1" />
                <stop offset="100%" style="stop-color:red; stop-opacity:1" />
            </linearGradient>
        </defs>
        <text x=0 y=60% fill="url(#grad)" style="font-size:100px;font-weight: bold;">测试文字</text>
    </svg>

效果：

x1-x2：是x轴变换
y1-y2：是y轴变换
像实例中的就是从上往下渐变
stop-color：是变化的颜色

<stop offset="0%" style="stop-color:green; stop-opacity:1" />
<!-- 可以分多个百分比写  看自己需要情况 自己调 -->

例如：

    <svg height='auto' width='auto'>
        <defs>
            <linearGradient id="grad" x1="10%" y1="20%" x2="100%" y2="100%">
                <stop offset="0%" style="stop-color:blue; stop-opacity:1" />
                <stop offset="30%" style="stop-color:black; stop-opacity:1" />
                <stop offset="60%" style="stop-color:pink; stop-opacity:1" />
                <stop offset="100%" style="stop-color:red; stop-opacity:1" />
            </linearGradient>
        </defs>
        <text x=0 y=60% fill="url(#grad)" style="font-size:100px">我的颜色有很多</text>
    </svg>