A, CSS3 background image region
background-clip (designated background drawing area) ackground-Clip: border-Box / padding-box / Content-Box; / * no padding time, content-box, and the same effect as padding-box * /Compatibility: IE9 +, FireFox, Chrome, Safari, Opera
Two, CSS3 background image localization
background-position (positioning background)
background-position: px / % ...;
background-origin (background image setting element original starting position)
background-origin: padding-box|border-box|content-box;Compatibility: IE9 +, FireFox4 +, Chrome, Safari5 +, Opera
Three, CSS3 background image size
background-size (the size of the specified background image) background-size: PX /% / Cover / Contain; / * Cover: the background image expanded to be large enough to completely cover the area that the background image (i.e., completely blank) Contain: the extended to the maximum image size, width and height so as to fully adapt the content region (meet at least one side is not blank) * /Compatibility: IE9 +, FireFox4 +, Chrome, Safari5 +, Opera
Four, CSS3 multiple background images
Image-background: URL (img1.jpg), URL (img2.png); / * IMG1 put in front, img2 put behind * /
Five, CSS3 gradients
Linear gradient - from top to bottom (default)
background: linear-gradient(direction, color-stop1, color-stop2, ...);Compatibility: IE10 +, FireFox16 + (3.6 -moz- kernel), Chrome26 + (10.0 -webkit -), Safari6.1 + (5.1 -> webkit -), Opera12.1 + (11.6 -o-)
Linear gradient - from left to right
background:-webkit-linear-gradient( begin-direction, color-stop1, color-stop2, ...); background: -moz-linear-gradient( end-direction, color-stop1, color-stop2, ...); background: -o-linear-gradient( end-direction, color-stop1, color-stop2, ...); background: linear-gradient(to end-direction, color-stop1, color-stop2, ...); /*注意webkit是起始方向*/
Linear gradient - diagonal
background:-webkit-linear-gradient( begin-level begin-vertical, color-stop1, color-stop2, ...); background: -moz-linear-gradient( end-level end-vertical,color-stop1, color-stop2, ...); background: -o-linear-gradient( end-level end-vertical,color-stop1, color-stop2, ...); background: linear-gradient( to end-level end-vertical,color-stop1, color-stop2, ...); /*注意webkit是起始方向*/
Linear gradient - Custom angle
background: -webkit-linear-gradient ( angle, color-stop1, color-stop2, ...); // default from left to right background: -moz-linear-gradient ( angle, color-stop1, color-stop2, ...); // default from the bottom up background: -o-linear-gradient ( angle, color-stop1, color-stop2, ...); // default from the bottom up background: linear-gradient (angle , color-stop1, color-stop2 , ...); // default (high priority) from the bottom up / * angle units deg * /
Linear gradient - custom color distribution node
Syntax: Same as above, plus "space + percent" after the color values (transparent color: transparent)
Linear gradient - repeat gradient
Syntax: Same as above, and add repeating- before linear
Radial gradient
background: Radial-gradient (center, size Shape, Color-Start, ..., Last-Color); / * center centered by default, do not write the center value to: px /% the like may be positioned center position * /
Radial Gradient - Color uniformly distributed nodes (default)
background:-webkit-radial-gradient(color-stop1, color-stop2, ...); background: -moz-radial-gradient(color-stop1, color-stop2, ...); background: -o-radial-gradient(color-stop1, color-stop2, ...); background: radial-gradient(color-stop1, color-stop2, ...);
Radial Gradient - custom color distribution node
Syntax: linear and empathy
Radial gradient - set the shape
background:-webkit-radial-gradient(shape, color-stop1, color-stop2, ...); background: -moz-radial-gradient(shape, color-stop1, color-stop2, ...); background: -o-radial-gradient(shape, color-stop1, color-stop2, ...); background: radial-gradient(shape, color-stop1, color-stop2, ...); /*shape的值： circle —— 圆形 ellipse —— 椭圆（默认）*/
Radial Gradient - size (using keywords)
background: Radial--webkit-gradient (size, Color-STOP1, STOP2-Color, ...); background: -moz-Radial-gradient (size, Color-STOP1, STOP2-Color, ...); background: Radial-gradient--o (size, STOP1-Color, Color-STOP2, ...); background: Radial-gradient (size, STOP1-Color, Color-STOP2, ...); / * key size Description ( relative to the center) Closest-side: closest edge of the farthest-side: the farthest edge closest-corner: recently angle farthest-corner: farthest corners * /
Radial Gradient - repeat Gradient
Syntax: linear and empathy
Low version of the IE browser Gradient
filter:progid:DXImageTransform.Microsoft.gradient( >StartColorstr='color1',EndColorstr='color2',GradientType=0);
Integrated Case:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>综合</title> <style type="text/css"> div { width: 800px; height: 500px; background: #abcdef; background-size: 50px 50px; background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, #555), color-stop(.25, transparent), to(transparent)), -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, #555), color-stop(.25, transparent), to(transparent)), -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.75, transparent), color-stop(.75, #555)), -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.75, transparent), color-stop(.75, #555)); background-image: -moz-linear-gradient(45deg, #555 25%, transparent 25%, transparent), -moz-linear-gradient(-45deg, #555 25%, transparent 25%, transparent), -moz-linear-gradient(45deg, transparent 75%, #555 75%), -moz-linear-gradient(-45deg, transparent 75%, #555 75%); background-image: -o-linear-gradient(45deg, #555 25%, transparent 25%, transparent), -o-linear-gradient(-45deg, #555 25%, transparent 25%, transparent), -o-linear-gradient(45deg, transparent 75%, #555 75%), -o-linear-gradient(-45deg, transparent 75%, #555 75%); background-image: linear-gradient(45deg, #555 25%, transparent 25%, transparent), linear-gradient(-45deg, #555 25%, transparent 25%, transparent), linear-gradient(45deg, transparent 75%, #555 75%), linear-gradient(-45deg, transparent 75%, #555 75%); } </style> </head> <body> <div></div> </body> </html>