This time to bring you CSS3 to make a striped background, the use of CSS3 to make stripes on the background of the attention of the matter, the following is the actual case, together to see.
1. Achieve unequal-width background stripes:
. cont{width:500px;height:200px;background:linear-gradient (#78C9DB 70%, #0acf00 0); background-size:100% 20px;}
If you want to set a gradient of equal width, you only need to change the start value and end value to complementary
If you need to wait for a wide tangent gradient without transitions, the start and end values are set to 50%.
If you want vertical stripes, you just need to adjust the x and Y values of the background-size.
2. Tile stripe background
. Cont{width:500px;height:200px;background:linear-gradient (45deg, #78C9DB 50%, #0acf00 50%); background-size:30px 30px;}
3. Grassland background
. Cont{width:500px;height:200px;background:linear-gradient ( -45deg, #0acf00 50%, #78C9DB 50%); background-size:30px 100%;}
4. Diagonal Stripe background
. Cont{width:500px;height:200px;background:linear-gradient ( -45deg, #0acf00 25%, #78C9DB 0, #78C9DB 50%, #0acf00 0,# 0acf00 75%, #78C9DB 0);/*background:repeating-linear-gradient ( -45deg, #0acf00, #0acf00 15px, #78C9DB 0, #78C9DB 30px); */ The effect is the same background-size:30px 30px;}
5. Monochrome diagonal stripe background (using transparency and transparent)
. Cont{width:500px;height:200px;background: #fff repeating-linear-gradient (30deg,rgba (0,0,0,.5), Rgba (0,0,0,.5) 15px,transparent 0,transparent 30px);}
6. Plaid Shirt background
. Cont{width:500px;height:200px;background: #fff; Background:linear-gradient (90deg,rgba (100,0,0,.5) 50%, Transparent 0), Linear-gradient (Rgba (100,0,0,.5) 50%,transparent 0); background-size:30px 30px;}
7. Polka Dot Background
. Cont{margin:50px;width:500px;height:200px;background: #a95f44; background-image:radial-gradient (#fff 30%, Transparent 0), radial-gradient (#fff 30%,transparent 0); background-size:20px 20px;background-position:0 0,10px 10px; Must be a background-size size of 1/2}
8. Checkerboard Background
. Cont{width:500px;height:200px;background: #fff; Background-image:linear-gradient (45deg, #a95f44 26%, Transparent 0,transparent 75%, #a95f44 0), linear-gradient (45deg, #a95f44 26%,transparent 0,transparent 75%,# a95f44 0); background-size:30px 30px;background-position:0 0,15px 15px;}
Believe that you have read the case of this article you have mastered the method, more exciting please pay attention to the PHP Chinese network other related articles!
Recommended reading:
CSS3 mouse move into the picture dynamic prompt effect
How sticker-footer layouts are used in CSS