IT虾米网

文字&背景渐变色的应用详解

admin 2018年05月30日 编程语言 141 0

方法一: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属性支持并不是很好,

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

发布评论

分享到:

IT虾米网

微信公众号号:IT虾米 (左侧二维码扫一扫)欢迎添加!

js操作符类型转换大全详解
你是第一个吃螃蟹的人
发表评论

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。