Css如何给标题或者字体添加渐变底纹而不是背景

我们先来创建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; 
		
	}