为了丰富页面细节,设计师可能会给文字添加渐变来美化页面,如下图,旧web时代,这种渐变文字就得靠切图来实现,制作成图片,这样引入,实在是不方便。万一要更改内容,又要设计再出一张图进行替换。
实现效果
代码实现
<div class="box">
<h2>This is 1st paragraph.</h2>
<h3>This is 2nd paragraph.</h3>
<p>element</p>
</div>
.box {
text-align: center;
background: linear-gradient(to right, #9cf39c 30%, #ffff00 20%,#9cf39c 50%, #e8e8e8 80%);
background-clip: text;
-webkit-background-clip: text;
color:transparent;
font-family: 'Modern Antiqua', cursive;
}
h2{
font-size: 50px;
margin: 10px auto;
}
h3{
font-size: 30px;
margin: 10px auto;
}
p{
font-size: 24px;
}
-webkit-background-clip: text;
重点就是这个属性。使用了这个属性的意思是,以区块内的文字作为裁剪区域向外裁剪,文字的背景即为区块的背景,文字之外的区域都将被裁剪掉。
color: transparent
此时,文字颜色要设置为透明。
支持情况
还需要对特定浏览器添加前缀,我这里用的chrome,也需要webkit前缀才能生效