首页 > 建站教程 > CSS3+HTML5 >  利用 background-clip: text 实现css3文字渐变正文

利用 background-clip: text 实现css3文字渐变

background-clip是css3新属性,可以改变背景显示的范围,它主要由如下的值:
    background-clip: border-box
    background-clip: padding-box
    background-clip: content-box
    background-clip: inherit
    background-clip: text  (只有chrome支持)
详见:CSS3 background-clip 详解

今天,我爱模板网要分享的就是利用最后一个值,即 background-clip: text 来实现css3文字渐变效果(只有chrome支持)。

先来一个标题:
<h1>我爱模板网</h1>
接下来是css3:
<style>
 h1{
     /*将文字的颜色设置为透明*/
     color: rgba(0,0,0,0);
     /*设置容器的背景为渐变,当然,如果用图片效果更酷!*/
     background-image: -webkit-linear-gradient(90deg,red,green);
     /*利用 background-clip: text 让背景只显示被文字遮盖的部分,这样,渐变背景就做出来了*/
     -webkit-background-clip: text;
 }
</style>
当然,如果文字设置了其他颜色,就看不见下面的背景了,可以再加个属性:
-webkit-text-fill-color: transparent; /*文字填充透明色*/
下面是最终效果:

css3文字渐变
css3文字渐变

将背景渐变换成了背景图片:
background-image:url(img/bg.jpg);
下面的效果:

css3文字渐变
css3文字渐变