CSS to create Web page stripe background style skills to share

Through the CSS in the linear-gradient main can show the different direction of the stripe effect, here we know CSS production Web page stripe background style of skill sharing, the need for friends can refer to the next

One, transverse stripes
The following code:

Background:linear-gradient (#fb3 20%, #58a 80%)

The above code indicates that the upper part of the entire picture is 20% and the lower part 20% is the corresponding solid color, only the middle part is the gradient color. If you let the middle part shrink, when the middle part becomes 0, the top and bottom two colors are seven points and the end point is the same, there is no gradient and becomes a color bar of two colors:

Background:linear-gradient (#fb3 50%, #58a 50%);

You can then set the background size so that the background height becomes smaller and the background defaults to repeat, resulting in stripes

Background:linear-gradient (#fb3 50%, #58a 50%);   background-size:100% 30px;

We can not set the starting position of the second color, set to 0, then the browser defaults to the previous color start:

Background:linear-gradient (#fb3 30%, #58a 0);   background-size:100% 30px;

This creates a yellow 30% blue 70% striped background.
You can also set a variety of colors, with the following three color stripes:

Background:linear-gradient (#fb3 33.3%, #58a 0, #58a 66.6%,yellowgreen 0);   background-size:100% 45px;

Two, vertical stripes
Just add a prefix to the Linear-gradient method. Note that you also need to invert the background-size length-width setting

Background:linear-gradient (to Rightright, #fb3 50%, #58a 0);     background-size:30px 100%;

Three, diagonal stripes
Diagonal stripes can be achieved by modifying the value of the background-size and adding an angle to the linear-gradient:
Background:linear-gradient (45deg, #fb3 50%, #58a 0); Let the gradient of the background tilt
background-size:30px 30px; Fixed width and height of each piece of small component
But the result is only a small block of diagonal lines, rather than the whole p slash, we need four small p for a set of draw slash, add linear-gradient in the color decomposition:

Background:linear-gradient (45deg, #fb3 25%, #58a 0, #58a50%, #fb3 0, #fb3 75%, #58a 0);     background-size:30px 30px;

Iv. Use of Repeat-linear-gradient
For background drawing of slashes, using the Repeat-linear-gradient method is more efficient. When you use this method, the color changes you set are automatically repeated until you fill the entire p. The instance code is as follows:

Background:repeating-linear-gradient (45deg, #fb3, #58a 30px);

In this way, the angle can be arbitrarily changed without the adjustment difficulties in the Chinese law.
Background:repeating-linear-gradient (60deg, #fb3, #fb315px, #58a 0, #58a 30px);
(This method is actually equivalent to the control of size and the control of gradient together)

Five, about the color of the setting
Sometimes we want the color of the stripe background to be similar, but it's not convenient to manually set this color, and it's hard to find out what color to choose. You can use the following methods:

Background: #58a;     Background-image:repeating-linear-gradient (30deg,     Hsla (0,0%,100%,.1),     Hsla (0,0%,100%,.1) 15px,     Transparent 0,transparent 30px);

The principle of this method is: Specify the deepest color in the background, the other similar colors in the provisions with transparency adjustment

Vi. Comprehensive Examples
Here we put it together, corresponding to the following style one by one:

. stripes {       height:250px;       width:375px;       Float:left;       margin:10px;       -webkit-background-size:50px 50px;       -moz-background-size:50px 50px;       background-size:50px 50px; /* Control the size of the stripe */    -moz-box-shadow:1px 1px 8px Gray;       -webkit-box-shadow:1px 1px 8px Gray;       box-shadow:1px 1px 8px Gray;   }

. horizontal {       background-color: #0ae;       Background-image:-webkit-gradient (linear, 0 0, 0 100%, Color-stop (. 5, Rgba (255, 255, 255,. 2)), Color-stop (. 5, Transparen T), to (Transparent));       Background-image:-moz-linear-gradient (RGBA (255, 255, 255,. 2) 50%, transparent 50%, transparent);       Background-image:-o-linear-gradient (RGBA (255, 255, 255,. 2) 50%, transparent 50%, transparent);       Background-image:linear-gradient (RGBA (255, 255, 255,. 2) 50%, transparent 50%, transparent);   }

.vertical {background-color: #f90; Background-image:-webkit-gradient (linear, 0 0, 100% 0, Color-stop (. 5, Rgba (255, 255, 255,. 2)), Color-stop (. 5, Transparen       T), to (transparent));       Background-image:-moz-linear-gradient (0deg, Rgba (255, 255, 255,. 2) 50%, transparent 50%, transparent);       Background-image:-o-linear-gradient (0deg, Rgba (255, 255, 255,. 2) 50%, transparent 50%, transparent);   Background-image:linear-gradient (0deg, Rgba (255, 255, 255,. 2) 50%, transparent 50%, transparent); }

. Picnic {Background-color:white; Background-image:-webkit-gradient (linear, 0 0, 0 100%, Color-stop (. 5, transparent), Color-stop (. 5, RGBA (200, 0, 0,. 5)), to (RGBA (0, 0,. 5)),-webkit-gradient (linear, 0 0, 100% 0, Color-stop (. 5, transparent), color       -stop (. 5, Rgba (0, 0,. 5)), to (RGBA (200, 0, 0,. 5)));                         Background-image:-moz-linear-gradient (Transparent 50%, RGBA (0, 0,. 5) 50%, RGBA (200, 0, 0,. 5)),       -moz-linear-gradient (0deg, Transparent 50%, Rgba (0, 0,. 5) 50%, RGBA (200, 0, 0,. 5));                         Background-image:-o-linear-gradient (Transparent 50%, RGBA (0, 0,. 5) 50%, RGBA (200, 0, 0,. 5)),       -o-linear-gradient (0deg, Transparent 50%, Rgba (0, 0,. 5) 50%, RGBA (200, 0, 0,. 5));                         Background-image:linear-gradient (Transparent 50%, RGBA (0, 0,. 5) 50%, RGBA (200, 0, 0,. 5)), Linear-gradient (0deg, Transparent 50%, Rgba (0, 0,. 5) 50%, RGBA (200, 0, 0,.5)); }

. Picnic {Background-color:white; Background-image:-webkit-gradient (linear, 0 0, 0 100%, Color-stop (. 5, transparent), Color-stop (. 5, RGBA (200, 0, 0,. 5)), to (RGBA (0, 0,. 5)),-webkit-gradient (linear, 0 0, 100% 0, Color-stop (. 5, transparent), color       -stop (. 5, Rgba (0, 0,. 5)), to (RGBA (200, 0, 0,. 5)));                         Background-image:-moz-linear-gradient (Transparent 50%, RGBA (0, 0,. 5) 50%, RGBA (200, 0, 0,. 5)),       -moz-linear-gradient (0deg, Transparent 50%, Rgba (0, 0,. 5) 50%, RGBA (200, 0, 0,. 5));                         Background-image:-o-linear-gradient (Transparent 50%, RGBA (0, 0,. 5) 50%, RGBA (200, 0, 0,. 5)),       -o-linear-gradient (0deg, Transparent 50%, Rgba (0, 0,. 5) 50%, RGBA (200, 0, 0,. 5));                         Background-image:linear-gradient (Transparent 50%, RGBA (0, 0,. 5) 50%, RGBA (200, 0, 0,. 5)), Linear-gradient (0deg, Transparent 50%, Rgba (0, 0,. 5) 50%, RGBA (200, 0, 0,.5)); }

. angled-135 {background-color: #c16; Background-image:-webkit-gradient (linear, 0 0, 100% 100%, Color-stop (.), Rgba (255, 255, 25  5,. 2), color-stop (. Transparent), Color-stop (. 5, transparent), Color-stop (. 5, Rgba (255),                               255, 255,. 2), Color-stop (., Rgba (255, 255, 255,. 2)), Color-stop (., transparent),       to (transparent)); Background-image:-moz-linear-gradient ( -45deg, Rgba (255, 255, 255,. 2) 25%, transparent 25%, tra Nsparent 50%, Rgba (255, 255, 255,. 2) 50%, RGBA (255, 255, 255,. 2) 75%, transparent 75%, Transpa       Rent); Background-image:-o-linear-gradient ( -45deg, Rgba (255, 255, 255,. 2) 25%, transparent 25%, trans Parent 50%, RGBA (255, 255, 255,. 2) 50%, RGBA (255, 255, 255,. 2) 75%, transparent 75%, Transpare       NT); Background-image:linEar-gradient ( -45deg, Rgba (255, 255, 255,. 2) 25%, transparent 25%, transparent 50%, RGBA (255, 25   5, 255,. 2) 50%, RGBA (255, 255, 255,. 2) 75%, transparent 75%, transparent); }

. Checkered {background-image:-webkit-gradient (linear, 0 0, 100% 100%, Color-stop (. #555), Color-stop (.), trans Parent), to (Transparent)),-webkit-gradient (linear, 0 100%, 100% 0, Color-stop (. #555), Color-s Top (. Transparent), to (Transparent)),-webkit-gradient (linear, 0 0, 100% 100%, Color-stop (. 75, Transparent), color-stop (. #555)),-webkit-gradient (linear, 0 100%, 100% 0, Color-stop (.), Tra       nsparent), Color-stop (. #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-gra DIent ( -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%); }

HTML code:

<p class= "Horizontal stripes" ></p><p class= "vertical stripes" ></p><p class= "picnic Stripes "></p><p class=" angled stripes "></p><p class=" angled-135 stripes "></p>< P class= "Checkered Stripes" ></p>