我们都知道在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 哈喽我的