Understand background-origin, background-clip, background-size

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.

In css, the background image starts with the border of the padding, and the background color starts with the border of the border. For example, the following code

.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-origindifferent meanings: background-origincontrol is the starting point of the tiled picture, background-clipcontrol 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