Difference between background-origin and background-clip in CSS3

• Background-origin: to determine howbackground-positionOf a background in a certain box is calculated.
• Background-clip: to determine whether the backgrounds extends into the border or not.

In other words, it is actually:

• Background-origin: used to determine where the background starts
• Background-clip: used to determine where the background is displayed (in fact, clip can be seen from the literal meaning of origin and clip. clip is cut). Where can the background be extended.

They have three values: border-box | padding-box | content-box. The default value of background-origin is padding-box, the default value of background-clip is border-box.

The following examples show their differences more bluntly:

Write

Then add a simple style:

{:;:;:;:;:;:;:;:;}

The result is as follows:

The default values of background-origin and background-clip are padding-box and border-box.

When you add the following code groups, you can see different effects:

A branch -------------------------------------------------------------------------------------------

{:;:;}

We can see that the background image is drawn from border and the display starts from border, so the effect is as above.

B Branch --------------------------------------------------------------------------------------------

{:;:;}

The painting starts from border, but the display starts from padding, so it is shown as above.

C Branch --------------------------------------------------------------------------------------------

{background-origin:;:;}

Draw starts from content, and display starts from border.

D Branch --------------------------------------------------------------------------------------------

Of course, if the rendering starts from border and the display starts from content, the effect will be the following.

{:;:;}