文字&背景渐变色的应用

最新推荐文章于 2020-11-23 17:09:22 发布

R芮R

最新推荐文章于 2020-11-23 17:09:22 发布

阅读量96

点赞数

原文链接：http://www.cnblogs.com/yang6120yang/p/8522454.html

版权

方法一：content内容生成技术 + mask-image属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文字&背景渐变色(content内容生成技术 + mask-image属性)</title>
    <style>
        .text-gradient {
            display: inline-block;
            font-family: '微软雅黑';
            font-size: 10em;
            position: relative;
        }

        .text-gradient[data-text]::after {
            content: attr(data-text);
            color: green;
            position: absolute;
            left: 0;
            z-index: 2;
            -webkit-mask-image: -webkit-gradient(linear, 0 0, 0 bottom, from(#ff0000), to(rgba(0, 0, 255, 0)));
        }

        .bg_gradient{
            width: 20em;
            height: 5em;
            line-height: 5em;
            background-color: #d51875;
            background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #fe96c9), color-stop(0.05, #d51875), color-stop(1, #7b0a2e));
            background-image: -moz-linear-gradient(top, #fe96c9, #d51875 5%, #7b0a2e);
            background-image: -o-linear-gradient(top, #fe96c9, #d51875 5%, #7b0a2e);
        }
    </style>
</head>
<body>
    <h2 class="text-gradient" data-text="WebApp Model">WebApp Model</h2>
    <div class="bg_gradient"></div>
</body>
</html>

方法二：background-image + background-clip + text-fill-color

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文字&背景渐变色（background-image + background-clip + text-fill-color）</title>
    <style>
        .text-gradient {
            display: inline-block;
            color: green;
            font-size: 10em;
            font-family: '微软雅黑';
            background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(rgba(0, 128, 0, 1)), to(rgba(51, 51, 51, 1)));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .bg_gradient{
            width: 20em;
            height: 5em;
            line-height: 5em;
            background-color: #d51875;
            background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #fe96c9), color-stop(0.05, #d51875), color-stop(1, #7b0a2e));
            background-image: -moz-linear-gradient(top, #fe96c9, #d51875 5%, #7b0a2e);
            background-image: -o-linear-gradient(top, #fe96c9, #d51875 5%, #7b0a2e);
        }
    </style>
</head>
<body>
    <h2 class="text-gradient">WebApp Model</h2>
    <div class="bg_gradient"></div>
</body>
</html>

注意以上两种方法在各个浏览器中表现并不一致！

以下是火狐浏览器：demo1和demo2

以下是Google浏览器：demo1和demo2

IE浏览器不支持；

总结：

1.两种方法从原理上来说并不一样，所以会有差异性的表现；

2.方法一中，text-fill-color与mask-image属性支持并不是很好，

　方法二结构简单，易于控制，颜色的选取与控制也更精确，理解上也更容易理解，所以更推荐方法二；

转载于:https://www.cnblogs.com/yang6120yang/p/8522454.html

R芮R

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
文字&背景渐变色的应用

方法一：content内容生成技术 + mask-image属性<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>文字&背景渐变色(content内容生成技术 + mask-image属性)</title...
复制链接

扫一扫