Talk about the inner universe of background
One, background has those attributes
It is generally recommended to use the background attribute instead of using a single attribute separately, because this attribute is better supported in older browsers and requires fewer letters to be typed.
These attributes are very simple to use, so I won't give specific examples. I want to talk about the relationship between him and the model
Second, the relationship with the box model
When filling a box with a background color or background image, there is a saying here. Let’s introduce it below.
background and background-color are from the upper left corner of the element's border to the lower right corner
The background-image is different. It starts from the upper left corner of the padding edge and ends at the lower right edge of the border.
That may not be very clear. Let me give you a few examples and you will understand.
<!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>
Analyze the code
The background color we fill is from the upper left corner of the element's border to the lower right corner of the entire element.
When we change background: #00FFFF; to background-color: #00FFFF; the effect is the same as the picture above.
Let's look at a piece of code
<!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>
We can see that the background-image starts from the upper left corner of the padding edge and ends at the lower right edge of the border.
Then we can also use background-clip to change it to what we want.
background-clip: border-box; // The background extends to the outer edge of the border (but below the border)
background-clip: padding-box; // There is no background below the border, that is, the background extends to the outer edge of the inner margin.
background-clip: content-box; // The background is clipped to the outer edge of the content-box.
On the basis of the above code, we add 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>
Change to background-clip: padding-box;
Change to background-clip: content-box;
Third, we use the knowledge we just learned to write an effect like the following
Don't talk nonsense, just go to the code
<!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>
Or write like this, you can also
<!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>
The content of this article draws on the link https://mp.weixin.qq.com/s/OwUx_KUNSsZqpau2pg3nmA