在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;
}
效果图: