background-clip
这是CSS3新出的属性,其中clip 的意思为裁剪 其主要是用来确定背景的裁剪区域,换句话说,就是如何控制元素背景的剪裁区域,看一下语法
background-clip : border-box || padding-box || content-box
取值:
1、border-box:此值为默认值,背景从border区域向外裁剪,也就是超出部分将被裁剪掉;
2、padding-box:背景从padding区域向外裁剪,超过padding区域的背景将被裁剪掉;
3、context-box:背景从content区域向外裁剪,超过context区域的背景将被裁剪掉;
我们简单看一下使用代码
<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:300px;
height:300px;
padding:50px;
background-color:yellow;
background-clip:content-box;
border:2px solid #92b901;
}
</style>
</head>
<body>
<div>
这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。
这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。
这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。
这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。
这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。
这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。
</div>
</body>
</html>
我们看到,在应用
background-clip:content-box;
属性后,大盒子的背景除了文字效果外的都被裁减了,也就是上面用大白话解释的如何控制元素背景的剪裁区域 这个新的属性兼容性也不我们想象的要好
真正的大boss来了, background-clip:text(请注意:只有在谷歌下支持,请添加私有属性)
-webkit-background-clip:text
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
div
{
margin: auto;
width: 400px;
height: 300px;
line-height: 300px;
text-align: center;
font-size: 180px;
font-weight: bold;
color: deeppink;
background: url(img/new.jpg)no-repeat center center;
background-size: cover;
}
</style>
</head>
<body>
<div>
clip
</div>
</body>
</html>
我们加上-webkit-background-clip:text; 来看下效果
发现盒子的背景区域被裁减了,光剩下了文字的背景
这里我有一个疑问,文字属于盒子,盒子的背景是图片,那么文字的背景不应该是图片吗,而照此说法,文字的背景不属于盒子的背景
我的理解就是把背景裁剪到文字,又因为文字有颜色,所以显示背景白色
这不就是 文字color的属性吗,我们来看一个厉害的,如果我把文字的颜色设置为transparent呢 代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
div
{
margin: auto;
width: 400px;
height: 300px;
line-height: 300px;
text-align: center;
font-size: 180px;
font-weight: bold;
color:transparent;
background: url(img/new.jpg)no-repeat center center;
background-size: cover;
-webkit-background-clip: text;
}
</style>
</head>
<body>
<div>
clip
</div>
</body>
</html>
那么根据这种方法我们是不是可以做渐变文字了,
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
div {
margin: auto;
width: 400px;
height: 300px;
line-height: 300px;
text-align: center;
font-size: 180px;
font-weight: bold;
color: transparent;
background: linear-gradient(90deg, #ffc700 0%, #e91e1e 50%, #6f27b0 100%);
background-size: 200% 100%;
background-position: 0 0;
animation: bgposition 2s infinite linear alternate;
}
@keyframes bgposition {
0% {
background-position: 0 0;
}
100% {
background-position: 100% 0;
}
}
</style>
</head>
<body>
<div>
clip
</div>
</body>
</html>
具体的如何制作背景渐变色动画请看这篇博客 http://www.cnblogs.com/coco1s/p/6603403.html