Css3, Use Cases of background-clip/background-origin, which can be explained in general and css3backgroundclip

Css3, Use Cases of background-clip/background-origin, which can be explained in general and css3backgroundclip

Let's not talk about the usage of background-clip/background-origin. Let's talk about css background.

1 <! DOCTYPE html> 2 
The width and height of p are 100 PX, and the color range is 100 *, right? What if padding-top: 10px is added to p? So the current height is 110, and the color background is 100*110, right?
Because the background includes padding, it is critical to understand why background-clip and background-origin are required.
To be disclosed, most of the cases will be used on the background of a useful Sprite.
1 <! DOCTYPE html> 2 


I want to move the love Y in the middle down a bit now. I add padding-top: 10px TO THE p tag;
The effect is as follows:

It does not move down but has a higher height. if you understand what I mentioned above, you should be able to understand this.
This is because the background includes padding. But we don't want to do this now. We can use the background-clip attribute of css3, which is a cropping attribute.
Add background-clip: content-box? That is to say, when the background is calculated from the content, it will not include padding.

Do you understand?
So what does background-origin mean?
 
I don't know if you have any direction, that is, when we use a Sprite, the default image will be displayed in the upper left corner.
If you want to change its location, you can use background-oringin
If you want to start from the center, set it to background-oringin: content-box;
Of course there are other attributes. You can check them online.