1.background-clip、background-image
相关属性
- background-image:为元素设置背景图像
属性 | 值 |
---|---|
url(‘URL’) | 指向图像的路径。 |
none | 默认值。不显示背景图像。 |
inherit | 规定应该从父元素继承 background-image 属性的设置。 |
- background-clip:规定背景的绘制区域
属性 | 值 |
---|---|
border-box | 背景被裁剪到边框盒。 |
padding-box | 背景被裁剪到内边距框。 |
content-box | 背景被裁剪到内容框。 |
text | 文字的背景即为区块的背景,文字之外的区域都将被裁剪掉。 |
代码实例
HTML代码
<p class="font1">你好,这是我的渐变色字体</p>
CSS代码
.font1{
background-image: -webkit-linear-gradient(bottom, rgb(201, 21, 134), rgb(20, 123, 255));
-webkit-background-clip: text;
color: transparent;
}
效果
原理
上面的代码就是先设置背景图为渐变色,然后通过background-clip
属性将文字之外的区域都裁剪掉,最后通过 color: transparent;
将文字设置为透明色,将后面的背景色显示出来。
2. mask-image
相关属性
- mask-image:详情请点击了解《mask遮罩层详解》
- :before:选择器向选定的元素前插入内容
- content :来指定要插入的内容。content取值 attr 就是用来获取属性值的,
content:attr(属性名);
代码实例
HTML代码
<p class="font2" text="你好,我是渐变色字体">你好,我是渐变色字体</p>
CSS代码
.font2 {
color:#223aee;
position: relative;
}
.font2:before{
content: attr(text);
position: absolute;
z-index: 10;
color:#f82a27;
-webkit-mask:linear-gradient(to left, #67a621, transparent );
}
效果
原理
利用content: attr(text);
能获取到元素的 text 属性,这里的这个text属性是自己自定义的一个属性。插入内容到<p>
元素,然后利用遮罩层的原理让元素的某一部分显示或隐藏,从而实现渐变色字体。
3. background-clip、text-fill-color
相关属性
- text-fill-color:指定文字的填充颜色,详情请了解《CSS3之text-fill-color属性》
代码实例
HTML代码
<p class="font1">你好,这是我的渐变色字体</p>
CSS代码
.font1{
font-size:22px;
background-image: -webkit-linear-gradient(bottom, rgb(201, 21, 134), rgb(20, 11, 255));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
效果
原理
上面的代码就是先设置背景图为渐变色,然后通过background-clip属性将文字之外的区域都裁剪掉,最后通过text-fill-color: transparent;
将文字填充颜色设置为透明色,将后面的背景色显示出来。