CSS3 background-clip 和 backgroun
2016-11-30 本文已影响0人
RossWen
background-clip和background-origin是CSS3中新增的2个和背景相关的属性。
只需要从3个方面来理解就行！
1：WHAT?(什么东西)
background-clip：该属性指定了背景在哪些区域可以显示，与背景开始绘制的位置无关，背景的绘制的位置可以出现在不显示背景的区域.
background-origin：该属性指定了背景从哪个区域(边框、补白或内容)开始绘制,但也仅仅能控制背景开始绘制的位置，你可以用这个属性在边框上绘制背景，但边框上的背景显不显示出来那就要由background-clip来决定了
2：WHY?（有什么用）
作为背景属性的两个玩意，当然和操作背景有关，可以更加多样性的操作背景的位置与显示区域，另外苹果手机的滑动解锁就是利用 background-clip与蒙板来搞定的！代码如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#box{
width: 400px;
height: 50px;
background: #000;
line-height: 50px;
text-align: center;
color: #999;
position: relative;
margin:50px auto;
font-size: 30px;
}
#box span{
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
}
@keyframes move {
from{
background-position: -200px;
}
10%{
background-position: 300px;
}
to{
background-position: 600px;
}
}
#box span.mask{
background:-webkit-linear-gradient(-45deg,rgba(0,0,0,0) 40%,rgba(255,255,255,1) 50%,rgba(0,0,0,0) 60%);
-webkit-background-clip: text;
color: rgba(0,0,0,0);
background-position: -200px;
animation:4s move linear infinite;
}
</style>
</head>
<body>
<div id="box">
<span>开始滑动解锁</span>
<span class="mask">开始滑动解锁</span>
</div>
</body>
</html>
3：HOW?（怎么去用）
这两个属性都有3个相同的参数：
border-box：
padding-box
context-box
统统字面意思，来张图就明白了
background-clip.png
效果图比对
1： background-clip：
clip.jpg
2： background-origin：
2016_11_30_23_18.18.jpg
最后说一下兼容，CC3背景新的属性都是IE9+;
总结：其实这两个属性并没什么卵用，工作项目中遇到了，具体问题具体分析！
