知优码

您现在的位置是:首页 > WEB相关 > Css样式

Css样式

CSS(十六)-- background-clip: text

知优码 2019-11-09Css样式
简单而言,background-clip 的作用就是设置元素的背景(背景图片或颜色)的填充规则。与 box-sizing 的取值非常类似,通常而言,它有 3 个取值: 12345{ backg

 

简单而言,background-clip 的作用就是设置元素的背景(背景图片或颜色)的填充规则。

与 box-sizing 的取值非常类似,通常而言,它有 3 个取值:

 
1
2
3
4
5
{
    background-clip: border-box;  // 背景延伸到边框外沿(但是在边框之下)
    background-clip: padding-box; // 边框下面没有背景,即背景延伸到内边距外沿。
    background-clip: content-box; // 背景裁剪到内容区 (content-box) 外沿。
}

不过这些都不是本文的主角。本文的主角是 background-clip: text; ,当然现在只有 chrome 支持,所以通常想使用它,需要 -webkit-background-clip:text;

 

何为 -webkit-background-clip:text

使用了这个属性的意思是,以区块内的文字作为裁剪区域向外裁剪,文字的背景即为区块的背景,文字之外的区域都将被裁剪掉。

看个最简单的 Demo ,没有使用 -webkit-background-clip:text :

 
1
2
3
4
5
6
7
8
9
10
11
<div>Clip</div>
 
<style>
div {
  font-size: 180px;
  font-weight: bold;
  color: deeppink;
  background: url($img) no-repeat center center;
  background-size: cover;
}
</style>