Shulou(Shulou.com)06/01 Report--

This article is to share with you about the common operations of adding background attributes to CSS3. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

Background:

Background-color: background color

Background-image: background picture

Background-repeat: duplicate background

Background-position: background location

Background-attachment: background fixed / fixed)

Background-size background size

Background-size:x y

Background-size:100% 100%

Background-size:cover scale magnification

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

Multiple backgrounds

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

Background-origin background region location

Border-box: displays the background from the border area.

Padding-box: displays the background from the padding area.

Content-box: displays the background from the content 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 / / unsupported

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% dint yellow 100% (red gradients from 50% to 100% blue)

Color gradient

Repeating-linear-gradient linear gradient repetitive tiling

IE lower version gradient (filter):

Filter:progid:DXImageTransform.Microsoft.gradient (startColorstr='#ffffff',endColorstr='#ff0000',GradientType='1')

Color gradient

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

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

Shape: ellipse (ellipse), circle (positive circle)

Size: specific value or percentage, can also be keywords (closest-side (nearest), closest-corner (nearest), farthest-side (farthest), farthest-corner (farthest), contain (inclusive), cover (overlay)

Note: firefox currently only supports keywords

Thank you for reading! This is the end of this article on "what are the common operations of adding background attributes to CSS3?". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it out for more people to see!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.