Explain the usage of background-clip and background-origin in css3 attributes

Where are puzzles?

Background-clip and background-origin are two attributes introduced in css3 related to the element background. They have the same optional values, namely, border, padding, and content, the two attributes indicate the relationship between the element background and the element border, the padding, And the content area.

For example, if we want to display the background on the border, we can use background-origin to help us (the premise is that the border is transparent, otherwise it will overwrite the background)

In order to reflect both the border and the background of the border, I used a dotted border specially. (I am doing a demo on chrome, so the css3 attribute only uses the webkit prefix)

The running effect is as follows:

We can see that the black part is the border of the dotted line (because the side width is very large, so the dotted line looks strange), and the background is displayed in the dotted area.

Therefore, you can use background-origin to display the border of the background. What is background-clip doing?

Many books or articles explain that background-clip is used to control the display range of the background. Does background-clip allow the background to be displayed on the border? Try it.

The above code is used, but this time the background-origin in it is changed to background-clip.

Then, check the running result:

We can see that the background is not displayed on the border. It seems that background-clip does not have this function. What is the purpose of this product?

 

Yuan Fang, what do you think about background-clip and background-origin?

After an unannounced visit, the humble employee has found out the details of the two, and the humble employee slowly said.

First, let's take a lookBackground-clipOn the mozilla website, the explanation is:

This explanation is still very painful. The definition is probably to specify whether the background image or color can be displayed under the border. As mentioned above, setting background-clip to border does not work. In fact, the default value of background-clip is border.

In fact, the real role of background-clip is to determine the regions in which the background is displayed. If the value is border, the background is displayed in the border, fill-in, and content areas of the element. If the value is padding, the background is only displayed in the fill-in and content areas; if the value is content, the background is only displayed in the content area.

So does the background-clip: border in front of the hair not work? So we have to talk about background-origin.

This time, I still don't read any official website, manuals, or other things. I will talk about my understanding directly.

Background-originIt refers to the area where the background is displayed, or the area from which the background is drawn (border, padding, or content area ).

If you still don't understand it, let's take it for a moment. Should background-position always know? It specifies the background position, such as background-position: 0px 0px. Where does this 0 pixel mean? This involves a reference point.Background-originIs used to specify whether the reference point of background-position is in the upper left corner of the border area, in the upper left corner of the fill area, or in the upper left corner of the content area, the three values are border, padding, and content. background-position can also be left, right, or other direction words. In this case, it cannot be a reference point. Instead, it should be said that if the value of background-origin is border, the reference area includes three parts: border area, fill area, and content area. If the value is padding, the reference area only includes the fill area and content area. If the value is content, you don't need to talk about it.

Now let's take a look at the previous question and we will be very open. You set the background-clip as border. At this time, the background will be displayed in the border, but the problem is that the background is not drawn from the upper-left corner of the border. It is drawn from the fill-up area. The Goddess's background does not want to set up a silk border, you have opened your arms to meet the goddess, and you have another asshole. Hurry up and run. The default value of background-origin is padding, that is, the background is drawn from the whitelist by default.

But when the silk finally has a day against the attack, and there is no back powder for the fungus, when the goddess of the black fungus returns to send his arms, the silk can also be said: No!

Therefore, when the value of background-origin is border and the value of background-clip is padding, although the background is drawn from the border area, the background is not displayed because the border is set, therefore, the background part of the border is not displayed, just as the background image is cropped. Check the Code:

The effect is as follows:

 

Summary

Background-clip:Border | padding | content

This attribute specifies the areas in which the background can be displayed, but it is irrelevant to the position where the background starts to be drawn. The position of the background can appear in areas where the background is not displayed, this is equivalent to cropping a part of the area where the background image is not displayed.

Background-origin:Padding | border | content

This attribute specifies the region where the background is drawn (border, padding, or content), but it only controls the position where the background is drawn. You can use this attribute to draw the background on the border, however, if the background on the border is not displayed, it is determined by the background-clip.