方法一：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://blog.ytso.com/7551.html