What are the new background properties in CSS3?

Let me summarize some background attributes of CSS and the new background attributes of CSS3.

background:

background-color:Background color

background-image:Background image

background-repeat:Background repeat

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 enlargement

background-size:contain contains (image does not overflow)

Multiple backgrounds

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

background-origin Background area positioning

Border-box: Display the background starting from the border area.

padding-box: Display the background starting from the padding area.

content-box: Display the background starting from the content area.

background-clip Background drawing area

border-box: Crop the background outward from the border area.

padding-box: Crop the background outward from the padding area.

Content-box: Crop the background outward from the content area.

text: background fill text //Not supported

no-clip: Crop the background outward from the border area.

Color gradient

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

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

Angle: counterclockwise 0-360 degrees

Color position: red 0, blue 50%, yellow 100% (red starts 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

Path Gradient: radial-gradient (starting point (center position of circle), shape/radius/size, color 1, color 2)

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

Shape: ellipse, circle

Size: specific value or percentage, or keyword (closest-side (closest-side), closest-corner (closest corner), farthest- side (farthest end), farthest-corner (farthest corner), contain (include), cover (cover));

Note: Firefox currently only supports the keyword

about background There are so many CSS properties. For more exciting content, please pay attention to other related articles on the php Chinese website!

Related reading:

What to do if DIVs overlap in HTML

##How to use margin 0 auto in HTML

What is the difference between br, p and DIV in html

The above is the detailed content of What are the new background properties in CSS3?. For more information, please follow other related articles on the PHP Chinese website!