在一篇文章里看到的,有两种方法:
第一种:
首先将包裹字体的span背景渐变
background: linear-gradient(to right, red, blue);
然后通过background-clip(规定背景的绘制区域)这一属性:
background-clip共有四个值:border-box:背景被裁剪到边框盒
padding-box:| 背景被裁剪到内边距框
content-box :背景被裁剪到内容框
text (现在只有 chrome 支持)以区块内的文字作为裁剪区域向外裁剪,文字的背景即为区块的背景,文字之外的区域都将被裁剪掉。
我们需要使用background-clip:text;
最后将字体颜色变透明将背景颜色显现
color:transparent;
这是第一个方法。
第二个方法:将包裹字体的h2起个类名text,使用css使其相对定位,颜色为黄色
<h2 text="前端简单说">前端简单说</h2>
h2{
position: relative;
color: yellow;
}
然后使用before选择器添加一个属性text,绝对定位,层级为10,颜色为绿色,
使用mask属性(目前,只有webkit内核的浏览器支持mask属性,简单说mask属性,就是能让元素的某一部分显示或隐藏。 )通过渐变将透明的隐藏,以达成渐变效果
h2:before{
content: attr(text);
position: absolute;
z-index: 10;
color:green;
-webkit-mask:linear-gradient(to left, red, transparent );
}
网友评论