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文字渐变
将背景渐变换成了背景图片:
background-image:url(img/bg.jpg);下面的效果:
css3文字渐变