<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box {
width: 300px;
height: 200px;
padding: 10px 5px;
border: 10px dashed green;
background: yellow url(1.jpg) no-repeat;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
代码说明：
1）.box 的内容区域大小：宽为300px，高为200px
width: 300px;
height: 200px;
2）.box 的内边距：上下内边距各为10px，左右内边距各为5px
padding: 10px 5px;
3）.box 的边框大小：上下左右边框各为10px
border: 10px dashed green;
因此 .box 实际大小为：
宽：内容区域宽 + 左右内边距之和 + 左右边框大小之和 = 300px + 5px*2 + 10px*2 = 330px
高：内容区域高 + 上下内边距之和 + 左右边框大小之和 = 200px + 10px*2 + 10px*2 = 240px
背景图片的定位区域
background-origin 属性规定背景图片相对于什么位置来定位。
1）background-origin: padding-box
默认值，规定背景图片相对于内边距左上角来定位。
2）background-origin: border-box
规定背景图片相对于边框左上角来定位。
3）background-origin: content-box
规定背景图片相对于内容区域左上角来定位。
规定背景图片相对于内边距左上角来定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box {
width: 300px;
height: 200px;
padding: 10px 5px;
border: 10px dashed green;
background: yellow url(1.jpg) no-repeat;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
代码运行结果：
padding-box
图片中阴影部分为 .box 的内容区域，绿色虚线部分为 .box 的边框，黄色部分为 .box 的实际大小，由此可见，背景图片默认是相对于内边距左上角定位的，即 background-orign: padding-box；。
规定背景图片相对于边框左上角来定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box {
width: 300px;
height: 200px;
padding: 10px 5px;
border: 10px dashed green;
background: yellow url(1.jpg) no-repeat;
background-origin: border-box;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
代码运行结果：
border-box
图片中阴影部分为 .box 的内容区域，绿色虚线部分为 .box 的边框，黄色部分为 .box 的实际大小，由此可见，此图中背景图片是相对于边框左上角定位的。
规定背景图片相对于内容区域左上角定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box {
width: 300px;
height: 200px;
padding: 10px 5px;
border: 10px dashed green;
background: yellow url(1.jpg) no-repeat;
background-origin: content-box;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
代码运行结果：
context-box
图片中阴影部分为 .box 的内容区域，绿色虚线部分为 .box 的边框，黄色部分为 .box 的实际大小，由此可见，此图中背景图片是相对于内容区域左上角定位的。
背景剪裁后的区域
background-clip 属性规定背景剪裁后的区域。
1）background-clip: border-box
默认值，规定背景剪裁到边框。
2）background-clip: padding-box
默认值，规定背景剪裁到内边距。
3）background-clip: content-box
规定背景剪裁到内容区域。
规定背景剪裁到边框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box {
width: 800px;
height: 500px;
padding: 10px 5px;
border: 10px dashed green;
background: yellow url(1.jpg) ;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
代码运行结果：
border-box
图片中阴影部分为 .box 的内容区域，绿色虚线部分为 .box 的边框，代码中设置了背景色为黄色，而图片中并没有黄色区域。由此可见，背景默认是被剪裁到了边框，即 background-clip: border-box；。
规定背景图片剪裁到内边距
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box {
width: 800px;
height: 500px;
padding: 10px 5px;
border: 10px dashed green;
background: yellow url(1.jpg);
background-clip: padding-box;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
代码运行结果：
padding-box
图片中阴影部分为 .box 的内容区域，绿色虚线部分为 .box 的边框，代码中设置了背景色为黄色，而图片中并没有黄色区域。由此可见，背景被剪裁到了内边距。
规定背景图片绘制到内容区域
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box {
width: 800px;
height: 500px;
padding: 10px 5px;
border: 10px dashed green;
background: yellow url(1.jpg);
background-clip: content-box;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
代码运行结果：
content-box
图片中阴影部分为 .box 的内容区域，绿色虚线部分为 .box 的边框，代码中设置了背景色为黄色，而图片中并没有黄色区域。由此可见，背景被剪裁到了内容区域。
背景图片大小
background-size 属性规定背景图片大小。
1）background-size: XXpx XXXpx
规定背景图片宽为 XXpx，高为 XXXpx。
2）background-size: cover
规定背景图片的宽高等比缩放至能将整个容器铺满的最小大小。
3）background-size: contain
规定背景图片的宽高等比缩放至适合容器的大小，不一定会铺满容器。
未规定背景图片大小
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box {
width: 100px;
height: 100px;
border: 1px solid red;
background: url(1.jpg) no-repeat;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
代码运行结果：
no size
由图片可见，当未设置背景图片大小时，若背景图片大小超过了容器大小，则背景图片超出容器大小的部分将不被显示出来。
规定背景图片大小为指定的大小
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box {
width: 100px;
height: 100px;
border: 1px solid red;
background: url(1.jpg) no-repeat;
background-size: 100px 100px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
代码运行结果：
100X100
由图片可见，当规定背景图片大小为指定的大小时，背景图片将被缩放（拉伸）至指定的大小。
规定背景图片大小为 cover
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box {
width: 100px;
height: 100px;
border: 1px solid red;
background: url(1.jpg) no-repeat;
background-size: cover;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
代码运行结果：
cover.png
由图片可见，当规定背景图片大小为 cover 时，背景图片的宽高将被等比缩放至能将整个容器铺满的最小大小。
规定背景图片大小为 contain
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box {
width: 100px;
height: 100px;
border: 1px solid red;
background: url(1.jpg) no-repeat;
background-size: contain;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
代码运行结果：
contain.png
由图片可见，当规定背景图片大小为 contain 时，背景图片的宽高将被等比缩放至适合容器大小（容器不一定会被铺满）。
网友评论