CSS3 makes a striped big background

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