Summary and sharing of CSS background property and CSS3 background image settings-CSS Tutorial-php.cn

In css, there are several background attributes as follows

Attribute	Description	CSS
background	Set all background properties in one statement.	1
background-attachment	Set whether the background image is fixed or scrolls with the rest of the page.	1
background-color	Set the background color of the element.	1
background-image	Set the background image of the element.	1
background-position	Set the starting position of the background image.	1
background-repeat	Set whether and how to repeat the background image.	1
background-clip	Specifies the drawing area of the background.	3
background-origin	Specifies the positioning area of the background image.	3
background-size	Specifies the size of the background image.	3

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

Copy after login

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

Copy after login

Note: This attribute does not support IE6, 7, 8
One picture can understand the difference between the three attribute values:
Summary and sharing of CSS background property and CSS3 background image settings

background-size ：[  |  | auto ]{1,2} | cover | contain

Copy after login

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

Copy after login

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

##border-box Border padding-box Padding (default) content-box Content area

background-origin	value

##background-origin: border-box | padding-box | content-box;

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

##background-clip value border-box Border (default value) padding-box Inside Margin content-box Content area no-clip Do not clip, with The effect of border-box is the same 3. Set the size of the background image background-size

background-size value ##auto Default value, do not change The original height and width of the background image appears in pairs such as 200px 50px, only sets one value, and scales proportionally Any value between 0%~100%, only set one value, scale proportionally Overlay contain


	The length value
	Percentage
	cover
, scale the background image proportionally to completely cover the container. The background image may exceed the container.	contain
, scale the background image proportionally to the width or height equal to the width or height of the container, the background image is always included inside the container.

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!