方法一: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
属性支持并不是很好,
方法二结构简单,易于控制,颜色的选取与控制也更精确,理解上也更容易理解,所以更推荐方法二;