1. Added background-origin in css3
Use a picture to do the demo, in order to make it easier to see the border, 1px of red, white, black, and blue are used for the top, bottom, left, and right sides.
.box {
width: 100px;
height: 100px;
margin: 20px;
padding: 50px;
background: red url('./img.png') no-repeat;
border: 10px dashed yellowgreen;
}
<div class="box"></div>
The effect is as follows:
Although padding=50
, but the background image is close to the border, the entire padding will be covered with the background image.
The background color starts from the border
And the new background-origin of css3 can control the tile position of this background image, and you can control where the image starts to be tiled, but the color cannot be controlled. The color is always from border to content.
1.1 Default value of padding-box
Setting this and not setting the effect is the same
1.2 content-box
The background image is tiled from the content, not from padding. background-origin: content-box
. The effect is as follows:
1.3 border-box
Background beginning from border shop: background-origin: border-box
. The effect is as follows:
2. css3 added background-clip
Controls which areas are only displayed after the image is tiled and cropped.
Attention and background-origin
different meanings: background-origin
control is the starting point of the tiled picture, background-clip
control is the area to be displayed after the tiled picture is cropped
By default, the image will be displayed from the border to the content
.box {
width: 100px;
height: 100px;
margin: 20px;
padding: 50px;
border: 10px dashed yellowgreen;
background: red url('./img.png');
}
<div class="box"></div>
The effect is as follows. It can be seen that the starting point of the picture is at the junction of border and padding, but there is a tiling effect on the border.
2.1 border-box
The default value, which is the same as if it is not set, will be displayed from border to content
2.2 padding-box
From padding to the content of the section was to show: background-clip: padding-box
.
2.3 content-box
Border and padding will not show the background image and color:background-clip: content-box
Background-clip will affect the image and color, while background-origin cannot affect the color, but can only control the image
3. background-size
Control the background image size
3.1 cover
It means "overlay", that is, to keep the image zoom ratio, and the background image must be covered to the full div. This will cause a long section beyond the div to be intercepted, and only the boder will be intercepted.background-size: cover
3.2 contain
It means "inclusive", that is, to keep the image zoom ratio, and the background image must be inserted into the div, which will cause a short blank.background-size: contain