background-clip: text

background-clip: text

介绍

background-clip 属性用于设置背景图片向外裁剪的区域:

1
background-clip : border-box | padding-box | content-box | text
  • border-box

    从 border 区域向外裁剪背景

  • padding-box

    从 padding 区域向外裁剪背景

  • content-box

    从 content 区域向外裁剪背景

  • text

    以文字作为裁剪区域向外裁剪,文字的背景就是区域的背景,文字之外的区域都将被裁剪

Demo

效果

文字透明

1
2
3
4
5
li {
background-image: url(https://picsum.photos/480/200?random=1);
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
}

文字渐变

1
2
3
4
5
6
7
8
p {
height: 50px;
line-height: 50px;
font-size: 50px;
color: transparent;
background-image: linear-gradient(rgba(blue, .1), rgba(yellow, .5));
background-clip: text;
}

文字扫光效果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
p {
font-size: 50px;
font-weight: 800;
margin-top: 20px;
display: inline-block;
width: 300px;
background: #111 -webkit-linear-gradient(left, #111, #fff) no-repeat 0 0 / 30px;
background-clip: text;
-webkit-text-fill-color: rgba(255, 255, 255, .3);
animation: ashine 2.5s ease-in infinite;
}

@keyframes sweep {
0% {
background-position: 0 0;
}

100% {
background-position: 100% 100%;
}
}

参考