close

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; 
		
	}
Share :