What are the new background properties of CSS3

Summarize some of the CSS background properties and what new background properties CSS3 have.

Background

Background-color: Background color

Background-image: Background image

Background-repeat: Duplicate Background

Background-position: Background positioning

Background-attachment: Background fixed/fixed)

Background-size Background size

Background-size:x y

background-size:100% 100%

Background-size:cover Proportional Amplification

Background-size:contain included (picture does not overflow)

Multi-background

Background:url () 0 0,url () 0 100%;

Background-origin Background Area positioning

Border-box: The background is displayed starting from the border area.

Padding-box: The background is displayed starting from the padding area.

Content-box: The background is displayed starting from the content contents area.

Background-clip Background Drawing Area

Border-box: Crop the background out of the border area.

Padding-box: Crop the background out of the padding area.

Content-box: Crops the background out of the content area.

Text: Background fill//unsupported

No-clip: Crop the background out of the border area.

Color Gradient

Linear gradient:-webkit-linear-gradient (start/angle, color position, ...,)

Starting point: Left/top/right/bottom/left top ... Default Top

Angle: 0-360 degrees counterclockwise

Color position: Red 0, Blue 50%,yellow 100% (red from 50% gradient to 100% Blue)

Color Gradient

Repeating-linear-gradient linear gradient repeating tile

IE low version gradient (filter):

Filter:progid:DXImageTransform.Microsoft.gradient (startcolorstr= ' #ffffff ', endcolorstr= ' #ff0000 ', gradienttype= ' 1 ');

Color Gradient

Radial gradient: radial-gradient (starting point (center position), shape/radius/size, color 1, color 2)

Starting point: Left/top/right/bottom or specific value/percentage

Shape: Ellipse (ellipse), Circle (Circle)

Size: Specific values or percentages can also be keywords (closest-side (nearest), Closest-corner (nearest corner), Farthest-side (farthest end), Farthest-corner (most far corner), contain (included), Cover (covered));

Note: Firefox currently supports only keywords

About the background of CSS properties so much more exciting please pay attention to the PHP Chinese network other related articles!

Related reading:

What about the overlap between the HTML div?

How to use margin 0 auto in HTML

What is the difference between br,p and div in HTML?