Background new attribute of css3_html/css_WEB-ITnose

Foreword

There are several new attributes about background images in CSS3: background-origin, background-clip, background-position, etc. I have a rough understanding of it before, but background The difference between -origin and background-clip is unclear. I just googled an article and found it to be pretty good. Let’s translate it.
Original link: The New Background Position in CSS3
Say Hello to Background-Origin and Background-Clip, CSS3 new features!
ps: The original online code demonstration has been moved from codepen.io to runjs.cn

background-position

Everyone who has used CSS to set a background image for an element has used the background-position property. Before CSS3, it set the value of that position relative to the upper left corner of the element (top, left ), for example:

div {background-position: 20px 40px; /* 距左边20px & 距顶部40px */ }

One problem is that it is impossible to determine the precise position relative to other points, such as the lower right corner (bottom, right), which can only start from the upper left corner.
We can write: background-position: right bottom; or background-position: 70% /* from left */ 80%/* from top */, but we cannot write 20px from the right end and 20px from the bottom.

Use the new background-position

To solve this problem, CSS3 provides the ability to define the starting position and determine the position of the origin (0,0).

How it works

Compared to the previous situation where only 2 values ​​​​can be assigned (relative to the horizontal and vertical distances of left and top), now using CSS3 we can specify the horizontal and vertical distances The origin of the vertical position, such as the right bottom value.
background-position: right 20px bottom 40px

Live Example

At the same time, you can also set multiple background images for a box and the origin of each image is different.

Live Example

background-origin

In CSS2, when we add background-image to an element, the image starts from the upper left corner of the element's padding.
The default background-origin position is consistent with setting the background-position value to 0 left, 0 top. We can see that the background-image starts with padding.

Live Example

Through background-origin we can set the border, padding or content of the starting position of the background image.
- border-box relative to the upper left corner of the element border (0, 0)
- padding-box (default) relative to the upper left corner of the element padding
- content-box relative to the upper left corner of the element content.
Live Example

background-clip

As you can see in the background-origin example, the background image of background-origin covers the right/bottom of the element's border/padding.
Use background-clip to solve this problem. Using background-clip we can determine the position where the background image is cropped. The value is the same as the value of background-origin, but the default is border-box and no cropping.

Live Example

As can be seen from the examples of background-origin and background-clip, they may need to be used together in most cases. And you can use these attributes to write nicer things, such as:

Live Example

ps: This is my first translation, I can barely understand it. . .