我们先来创建html的markup:
<h2 class="heading-bg">Find your Way</h2>
接下来我们来给它添加样式:
首先是设置字体大小,我们这里设置为3.6rem。 这里设置的rem是1rem = 62.5%的字体大小,也就是1rem = 10px,同时把字母设置为都是大写,并且将字体的粗细设置为700磅。
.heading-bd {
font-size: 3.6rem;
text-transform:uppercase;
font-weight:700;
}
这是现在的效果:

接下来我们给文字添加背景:
.heading-bd {
font-size: 3.6rem;
text-transform:uppercase;
font-weight:700;
background-image: linear-gradient(to right, #7ed56f, #28b485);
}
效果是这样:

为什么字体只有这么宽,背景有这么长?因为h2默认的是block元素,block元素占据的就是整行,所以要调整背景的距离的话,要设置h2为inline-block的模式。
.heading-bd {
font-size: 3.6rem;
text-transform:uppercase;
font-weight:700;
display:inline-block;
background-image: linear-gradient(to right, #7ed56f, #28b485);
}
如何把文字的背景变成文字的底纹呢?这里要用到background-clip属性,这个属性规定的是背景的绘制区域。而谷歌浏览器无法识别这个属性,所以必须用前缀-webkit-. 具体哪些浏览器支持什么,可以在caniuser.com这个网址上查询。
.heading-bd {
font-size: 3.6rem;
text-transform:uppercase;
font-weight:700;
display:inline-block;
background-image: linear-gradient(to right, #7ed56f, #28b485);
-webkit-background-clip:text;
}
但是现在你会发现还是不起作用,原因是因为文字的默认颜色覆盖了设置的底纹颜色,所以现在就要把文字的颜色改为透明,也就是color:transparent; 模式。完整结果如下:
.heading-bd {
font-size: 3.6rem;
text-transform:uppercase;
font-weight:700;
display:inline-block;
background-image: linear-gradient(to right, #7ed56f, #28b485);
-webkit-background-clip:text;
color:transparent;
}