谈谈background的内在乾坤
一、background都有那些属性
通常建议使用background这个属性，而不是分别使用单个属性，因为这个属性在较老的浏览器中能够得到更好的支持，而且需要键入的字母也更少。
这些属性使用起来都很简单，我就不具体举例了。我想说一说他和和模型之间的关系
二、和盒模型之间的关系
当给一个盒子填充背景色或者背景图片的时候，这里就有说法了。下面介绍一下。
background和background-color 是从元素的边框左上角起到右下角止
background-image 却不一样，他是从 padding 边缘的左上角起而到 border 的右下角边缘止。
这么说可能不是很清楚，我来举几个例子你就明白了。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div {
position: relative;
width: 180px;
height: 180px;
padding: 20px;
border: 20px dashed #FF0000;
background: #00FFFF;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
分析一下代码
我们填充的背景色是铺满整个元素的从元素的边框左上角起到右下角止。
当我们把background: #00FFFF;改为background-color: #00FFFF;效果和上图是一样的。
再来看一段代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div {
position: relative;
width: 180px;
height: 180px;
padding: 20px;
background: no-repeat;
background-image: url(./images/cat.jpg);
border: 20px dashed #FF0000;
/* background-clip: content-box; */
background-size: auto auto;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
我们可以看到，background-image是从 padding 边缘的左上角起而到 border 的右下角边缘止。
那么我们也可以通过background-clip去改变成我们想要的样子。
background-clip: border-box; // 背景延伸到边框外沿（但是在边框之下）
background-clip: padding-box; // 边框下面没有背景，即背景延伸到内边距外沿。
background-clip: content-box; // 背景裁剪到内容区 (content-box) 外沿。
在上面代码的基础上，我们添加background-clip: border-box;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div {
position: relative;
width: 180px;
height: 180px;
padding: 20px;
background-image: url(./images/cat.jpg);
border: 20px dashed #FF0000;
background-clip: border-box;
background-size: auto auto;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
换成background-clip: padding-box;
换成background-clip: content-box;
三、我们用刚才学到的知识写一个下面的这样效果
废话不多说，直接上代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div {
position: relative;
width: 180px;
height: 180px;
background-color: #00FFFF;
border: 10px dashed #FF0000;
}
div::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #fff;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
或者这样写，也可以
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{
position: relative;
width: 180px;
height: 180px;
background:#fff;
background-clip:padding-box;
border:10px dashed #FF0000;
}
div::before{
content:"";
position:absolute;
top:-10px;
left:-10px;
bottom:-10px;
right:-10px;
background:#00FFFF;
z-index:-1;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
本篇文章内容借鉴该链接https://mp.weixin.qq.com/s/OwUx_KUNSsZqpau2pg3nmA