background-clip 制作文字火焰效果

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