利用 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; /*文字填充透明色*/

下面是最终效果：


将背景渐变换成了背景图片：

background-image:url(img/bg.jpg);

下面的效果：



部分素材资源来源网站，本站提供免费下载，如有侵权请联系站长马上删除！