What are the common operations for adding background attributes to CSS3
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!
