background-clip 制作文字火焰效果

时间:2021-11-11 07:56:02

1、Background-clip的语法

background-clip: border-box || padding-box || context-box || no-clip || text

2、Background-clip的数值

(1)border-box:此值为默认值,背景从border区域向外裁剪,也就是超出部分将被裁剪掉;

(2)padding-box:背景从padding区域向外裁剪,超过padding区域的背景将被裁剪掉;

(3)context-box:背景从content区域向外裁剪,超过context区域的背景将被裁剪掉;

(4)no-clip: 背景从border区域向外裁剪背景。

(5)text:文本剪裁

3.示例如下,效果如图所示

<div class="bgclip fire">THE FIRE</div>

.bgclip {
text-transform: uppercase;
font-size: 100px;
text-align: center;
font-family: 'Arial Black', sans-serif;
font-weight: bold;
letter-spacing: -2px;
line-height: 110px;
color: transparent;
padding: 0;
margin: 0;
}

.fire {
background: url('http://abarcarodriguez.com/blog/fire.gif');
-webkit-background-clip: text;
}

background-clip 制作文字火焰效果