Summary and sharing of CSS background property and CSS3 background image settings

In css, there are several background attributes as follows

From the table, we can see that background-clip, background-origin and background-size are new in css3 Attributes.

`background`-`clip`：border-box | padding-box | content-box | no-clip

is used to determine the cropping area of ​​the background.
Engine type Gecko Webkit Presto:

background-clip -moz-background-clip -webkit-background-clip -o-background-clip

Note: This attribute does not support IE6, 7, 8
One picture can understand the difference between the three attribute values:

background-size ：[ <length> | <percentage> | auto ]{1,2} | cover | contain

cover: Expand the background image large enough so that the background image completely covers the background area.
Some parts of the background image may not be displayed in the background positioning area.
contain: Expands the image to its maximum size so that its width and height fit entirely within the content area.

background-origin ： border | padding | content

Value:
border: Display the background starting from the border area.
padding: Display the background starting from the padding area.
content: Display the background starting from the content area.

CSS3 background image settings
1. Background image starting position background-origin

Note: The background must be set to no- repeat
2. Background image cropping background-clip

The above is the detailed content of Summary and sharing of CSS background property and CSS3 background image settings. For more information, please follow other related articles on the PHP Chinese website!