我爱模板网 > 建站教程 > 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文字渐变


部分素材资源来源网站,本站提供免费下载,如有侵权请联系站长马上删除!
上一篇:CSS3 background-clip 详解 下一篇:手机端响应式js动态rem尺寸的使用
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
选择头像:
最新评论

猜你喜欢