我们都知道在css3中，增加了不少背景相关的属性，而background-clip属性就是css3为background新增属性之一，那么background-clip是有什么作用呢？

其实它主要是用来确定背景的裁剪区域，换句话说，就是如何控制元素背景显示区域。他的语法是：

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

说明：

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

2、padding-box：背景从padding区域向外裁剪，超过padding区域的背景将被裁剪掉;

3、context-box：背景从content区域向外裁剪，超过context区域的背景将被裁剪掉;

4、no-clip： 背景从border区域向外裁剪背景。

5、text：文本剪裁 ，不过此值可惜只有Safari和Chrome支持

本文主要是用它的text值来做做实例。展现它带给我的惊艳之处，不多说，直接上实例和代码。

一、制作文字渐变效果

html： 

<div class="ui-yuan">hello word 哈喽我的</div>

css: 

.ui-yuan{
	width: 800px;
	font-size:5em; 
  	font-weight: 600; 
  	font-family: '微软雅黑';
    background:-webkit-gradient( linear, left top, right top, color-stop(0, #FB1616),
     color-stop(0.1, #F3167C), color-stop(0.2, #5A28F3), 
     color-stop(0.3, #2099EF), color-stop(0.4, #096B7B),
     color-stop(0.5, #5EE626), color-stop(0.6, #B7D416), 
     color-stop(0.7, #E0AC1A), color-stop(0.8, #EF6F14), 
     color-stop(0.9, #B90F4E) );/*-webkit下的老式写法*/
  	background:-webkit-linear-gradient(left, #FB1616, #F3167C 10%, 
  	#5A28F3 20%,#2099EF 30%, #096B7B 40%,#5EE626 50%, #B7D416 60%, 
  	#E0AC1A 70%, #EF6F14 80%,#B90F4E 90% ); /*-webkit下的新写法*/
  	color:transparent;
  	-webkit-background-clip: text;
  	margin: 0 auto;
}
效果：
hello word 哈喽我的

二、背景图片效果

其实这个跟上面是同样的，只是background用图片来做。

这里就不上代码了，直接上效果，如下所示：

hello word 哈喽我的