CSS学习（八）-background-origin、background-clip
一、理论：
1.css背景属性简介：
a.background-color 背景颜色
b.background-image 背景图片
c.background-repeat 铺放格式
d.background-attachment 固定或者滚动
e.background-position 设置背景图片位置
f.background-origin 指定绘制背景图片的起点
g.background-clip 指定背景图片的显示范围
h.background-size 指定背景图片的尺寸大小
i.background-break 指定内联元素的背景图片进行平铺时的循环方式
2.background-origin:
a.padding-box 决定background-position起始位置从padding的外边缘开始显示背景图片
b.border-box:决定background-position起始位置从外边缘开始显示背景图片
c.content-box:决定background-position起始位置从content的外边缘开始显示背景图片
d.content-box:决定background-position起始位置从content的外边缘开始显示背景图片
3.background-clip：
a.border-box 默认悠哉，元素边框之外的背景图片将被裁剪
b.padding-box:元素背景从padding区域向外裁减
c.content-box:元素背景从content区域之外的背景将被裁减
1.css背景属性简介：
a.background-color 背景颜色
b.background-image 背景图片
c.background-repeat 铺放格式
d.background-attachment 固定或者滚动
e.background-position 设置背景图片位置
f.background-origin 指定绘制背景图片的起点
g.background-clip 指定背景图片的显示范围
h.background-size 指定背景图片的尺寸大小
i.background-break 指定内联元素的背景图片进行平铺时的循环方式
2.background-origin:
a.padding-box 决定background-position起始位置从padding的外边缘开始显示背景图片
b.border-box:决定background-position起始位置从外边缘开始显示背景图片
c.content-box:决定background-position起始位置从content的外边缘开始显示背景图片
d.content-box:决定background-position起始位置从content的外边缘开始显示背景图片
3.background-clip：
a.border-box 默认悠哉，元素边框之外的背景图片将被裁剪
b.padding-box:元素背景从padding区域向外裁减
c.content-box:元素背景从content区域之外的背景将被裁减
二、实践：
1.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
div {
width: 300px;
height: 200px;
border: 20px dashed rgba(0,0,0,0.5);
background: orchid url(images/border-background.gif) no-repeat left top;
padding: 20px;
margin: 30px;
}
.padding-box{
-webkit-background-origin: padding-box;
-moz-background-origin: padding-box;
-o-background-origin: padding-box;
-ms-background-origin: padding-box;
background-origin: padding-box;
}
.padding-box1{
-webkit-background-origin: border-box;
-moz-background-origin: border-box;
-o-background-origin: border-box;
-ms-background-origin: border-box;
background-origin: border-box;
}
.padding-box2{
-webkit-background-origin: content-box;
-moz-background-origin: content-box;
-o-background-origin: content-box;
-ms-background-origin: content-box;
background-origin: content-box;
}
</style>
</head>
<body>
<div >1</div>
<div class="padding-box" >2</div>
<div class="padding-box1" >3</div>
<div class="padding-box2" >5</div>
</body>
</html>2.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
div {
width: 300px;
height:600px;
border:50px dash rgba(0,0,0,0.8);
background: rgba(0,25,25,0.8) url(images/2-11-test.jpg) no-repeat;
padding: 30px;
margin: 20px;
}
.no-repeat{
background-repeat: no-repeat;
}
.repeat{
background-repeat: repeat;
}
</style>
</head>
<body>
<div class = "no-repeat"></div>
<div class="repeat"></div>
</body>
</html>3.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
div {
width: 300px;
height:300px;
border:30px dashed rgba(25,25,125,0.5);
background: url(images/2-11-test.jpg) no-repeat;
margin: 20px;
padding: 30px;
}
.border-box{
-webkit-background-clip: border-box;
-moz-background-clip: border-box;
-o-background-clip:border-box;
-ms-background-clip:border-box;
background-clip: border-box;
}
.border-box{
-webkit-background-clip: padding-box;
-moz-background-clip: padding-box;
-o-background-clip:padding-box;
-ms-background-clip:padding-box;
background-clip: padding-box;
}
.content-box{
-webkit-background-clip: content-box;
-moz-background-clip: content-box;
-o-background-clip:content-box;
-ms-background-clip:content-box;
background-clip: content-box;
}
</style>
</head>
<body>
<div class="border-box"></div>
<div class="padding-box"></div>
<div class="content-box"></div>
</body>
</html>