clip的text值设置文字遮罩效果

在background-clip中有一个属性值是text。用于让裁剪区域限制于容器中的文本内。可以让背景图呈现在文本区域内，实现用图像填充文本的神奇效果。

有一下几点需要注意：

    1.需要配合webkit的另一个私有属性： -webkit-text-fill-color: 来实现。

    2.仅适用于webkit系内核的浏览器。

这个效果需要使用webkit的写法来描述属性。

-webkit-background-clip:text;
-webkit-text-fill-color:transparent;

background-origin和background-clip两者的区别与配合

    1.origin控制的背景图呈现的起始位置（background-position的原点）

    2.clip控制背景图呈现的区域，包括所有背景

    3.二者结合使用可以精确背景图定位或一些特效

div{
	width:100%;
	height:300px;
	margin:200px auto;
	background-image:url(../../image/1.gif);
	border:1px solid red;
	-webkit-text-fill-color:transparent;
	background-size:100% 100%;
		-webkit-background-clip:text; 
	background-clip:text;         /*这种只有火狐可以实现*/
	background-position:left 0px top -110px;
	font-family:all;
	padding-top:30px;
}
.box1 h1 {
	width:900px;
	font-size:70px;
	font-weight:bold;
	text-align:center;
	margin:auto;
}

效果图：