The usage of Background-clip and background-origin in CSS3 attribute

Where is the confusion?

Background-clip and Background-origin are the two attributes associated with the element background introduced in CSS3, which have the same optional values, namely border, padding, content three, And both of these properties represent some kind of relationship between the element background and the element border, the padding (padding), and the content area.

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

In order to embody both the border and the background of the border, I purposely used a dashed border. (I'm a demo on Chrome, so the CSS3 property uses only the WebKit prefix)

The results are as follows:

We see that the black part is a dashed border (because of the wide width of the edge, so the dashed line looks strange), the virtual place just out of the background.

So use Background-origin to put the background on the border. What's that background-clip doing?

Many books or articles explain that background-clip is used to control the background of the display range, then Background-clip can also let the background display on the border? Then try it.

Or use the code above, but this time to change the inside of the Background-origin to Background-clip

Then look at the results of the operation:

We see the background does not appear on the border, it seems that Background-clip does not have this function. So what's the use of the goods?

Yuan Fang, what do you think of the two things about Background-clip and background-origin?

Monseigneur, after investigations, vulgar job has already ascertained these two people's the few, vulgar job slowly way.

First look at Background-clip, the Mozilla official online explanation is:

This explanation is still very painful, the translation is probably to specify whether the background image or color can be displayed under the border. But it has been said that the background-clip to border is no effect. In fact, the default value of Background-clip is border

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

That doesn't work for the background-clip:border in front of Mao? That's a background-origin to talk about.

This pensive is not looking at what official website Ah handbook Ah What, I directly say my understanding.

Background-origin refers to the area where the background is displayed, or where the background is drawn from (border, filter, or content area).

If you don't understand that, then let's just say, background-position should know? It specifies the position of the background, such as background-position:0px 0px; what is this 0 pixel relative to? This involves a point-of-reference problem. The function of Background-origin is to specify whether the reference point of the background-position is in the upper-left corner of the bounding area, in the upper-left corner of the filter area, or in the upper-left corner of the content area, and the corresponding three values are border, padding, content. Background-position can also be left, right and other direction words, this time cannot say reference point, and should say reference surface, if the value of Background-origin value is border, then the reference polygon includes border area, filter area, Three parts of the content area, if the value is padding, the reference polygon includes only the filter area and the content area, and if the value is content, then I don't have to say it.

This time to look at the front of the problem is enlightened, you set the Background-clip to border, when the border is able to display the background, but the problem is that the background is not drawn from the top left corner of the border, it is from the filler area to start drawing, goddess background is not thinking To respond to the cock silk border, you cock silk pose a bosom to greet goddess and have a fart use Ah, hurriedly run. The default value for Background-origin is padding, which is the default to draw the background from the filler area.

But the cock silk finally have anti-attack day, fungus no back powder, when become black fungus goddess again to throw bosom hug, dick Silk also can say a voice: No!

So 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 that originally belonged to the border is not displayed because the frame does not display the background. , as if the background picture was cropped as part of it. Look at the code:

The effect is as follows:

Finally, summarize

Background-clip: border|padding|content

This property specifies which areas of the background can be displayed, regardless of where the background starts to draw, and where the background is drawn can appear in areas that do not display the background, as if the background image is cropped as part of the area that does not display the background.

Background-origin: padding|border|content

This property specifies which area (border, filler, or content) the background is drawn from, but it only controls where the background begins to draw, and you can use this property to draw the background on the border, but the background on the border does not show that it is up to the background-clip to decide

The usage of Background-clip and background-origin in CSS3 attribute