为了不搞混，我将背景相关的属性整理成下图
在CSS3中，关于background新增了三个子属性
1. background-origin2. background-clip3. background-size
先来看background-origin，这里铺垫一下background-position，我们知道background-position是用于设置背景图片在元素中出现的位置
<style>
:root,body{
height: 100%;
margin: 0;
}
body{
background-image: url("./bg.jpg");
background-repeat: no-repeat;
background-position: 100px 100px;
}
</style>
结果
可以看到背景图在body中出现的位置是在距离左边100px，距离上边100px的地方。
而background-origin是用于设置背景图在计算background-position时的参考点位置取值包括：border-box padding-box content-box三个，分别表示从border区域开始显示图片，从padding区域开始显示背景图片，以及从内容区域开始显示背景图片。默认是padding-box
<style>
:root,body{
height: 100%;
margin: 0;
}
body div{
width: 400px;
height: 200px;
padding: 50px;
border: 50px solid rgba(244, 333, 0, .5);
background-color: pink;
background-image: url("./bg.jpg");
background-repeat: no-repeat;
/* background-origin: border-box; */
/* background-origin: padding-box;
background-origin: content-box; */
}
</style>
<body>
<div>
这里是content区域，这里是content区域，这里是content区域，这里是content区域，这里是content区域
</div>
</body>
分别对应border-box，padding-box，content-box
以上div中添加代码
background-origin: content-box;
background-position: 50px 50px;
结果，背景图片出现位置相对于content-box
接着来看下一个新增属性background-clip
background-clip用于背景裁剪，取值也有三个：border-box，padding-box和content-box；分别表示背景从边框区域开始裁剪，背景从padding区域开始裁剪，和背景从content区域开始裁剪
<head>
<style>
:root,
body {
height: 100%;
margin: 0;
}
div {
float: left;
margin-left: 10px;
width: 300px;
height: 150px;
padding: 50px;
border: 10px solid rgba(244, 333, 0, .5);
background-color: deeppink;
background-image: url("./bg.jpg");
background-repeat: no-repeat;
background-origin: border-box;
}
div:nth-of-type(1){
background-clip: border-box;
}
div:nth-of-type(2){
background-clip: padding-box;
}
div:nth-of-type(3){
background-clip: content-box;
}
</style>
<body>
<div>
<p>这里是content区域</p>
<p>这里是content区域</p>
</div>
<div>
<p>这里是content区域</p>
<p>这里是content区域</p>
</div>
<div>
<p>这里是content区域</p>
<p>这里是content区域</p>
</div>
</body>
分别对应border-box，padding-box，content-box
接着来看CSS3背景新增的最后一个属性background-size
background-size用于设置背景尺寸大小，取值可以是数值可以是百分比也可以是关键词auto、cover、contain分别表示背景图真实大小、将背景图等比缩放到完全覆盖容器（背景图有可能超出容器）、将背景图等比缩放到宽度或高度与容器的宽度或高度相等（背景图始终被包含在容器内）。
注意：该属性接受1~2个参数值。两个分别表示背景图宽度和高度；只提供一个，表示背景图宽度，而高度将依据背景图宽度进行等比缩放计算得到。另外百分比是参照背景图的background-origin区域大小进行换算的
<style>
:root,
body {
height: 100%;
margin: 0;
}
div {
float: left;
margin-left: 10px;
width: 300px;
height: 150px;
padding: 50px;
border: 2px solid rgba(244, 333, 0, .5);
background-color: deeppink;
background-image: url("./bg.jpg");
background-repeat: no-repeat;
}
div:nth-of-type(1) {
background-size: auto;
}
div:nth-of-type(2) {
background-size: cover;
}
div:nth-of-type(3) {
background-size:contain;
}
div:nth-of-type(4) {
background-size:50%;
}
div:nth-of-type(5) {
background-size:100px;
}
div:nth-of-type(6) {
background-size:100px 100px;
}
</style>
<body>
<div>
<p>background-size: auto</p>
</div>
<div>
<p>background-size: cover</p>
</div>
<div>
<p>background-size:contain</p>
</div>
<div>
<p>background-size: 50%</p>
</div>
<div>
<p>background-size: 100px</p>
</div>
<div>
<p>background-size:100px 100px</p>
</div>
</body>
结果对应如图
以上是CSS3background新增属性的全部内容！
网友评论