css条纹背景样式、及方格斜纹背景的实现

一、横向条纹
如下代码：

 background: linear-gradient(#fb3 %, #58a %)

上面代码表示整个图片的上部分20%和下部分20%是对应的纯色，只有中间的部分是渐变色。如果让中间的部分逐渐缩小，当中间部分变为0即上下两种颜色的七点和终点相同是，就没有了渐变而变成了两种颜色的色条:

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

接下来可以通过设置背景的大小，让背景高度变小并且背景默认为repeat，从而出现条纹状

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

设计坞https://www.wode007.com/sites/73738.html

我们可以不设定第二个颜色的起始位置，设置为0，则浏览器默认为接着上一个颜色开始：

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

这样就形成了一个黄色占30%蓝色占70%的条纹状背景
也可以设置多种颜色，下面设置了三种颜色的条纹：

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

 
二、竖向条纹
只需要在linear-gradient方法中加一个前缀即可。注意还需颠倒background-size长宽的设定

 background: linear-gradient(to rightright, #fb3 %, #58a );
 background-size:30px %;

三、斜向条纹
可以通过修改background-size的值以及为linear-gradient添加角度来实现斜向的条纹：

 background: linear-gradient(45deg, #fb3 %, #58a );    //让背景的渐变带有倾斜
 background-size:30px 30px;   //每一块小组成部分固定宽度和高度

但这样做的结果是只会形成一小块一小块的斜线，而不是整体div的斜线，我们需要以四个小div为一组绘制斜线，添加linear-gradient中的颜色分解：

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

 

四、使用repeat-linear-gradient
对于斜线的背景绘制，使用repeat-linear-gradient方法更有效。使用该方法的时候，设置的颜色变化会自动进行重复直到铺满整个div。实例代码如下：

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

通过这种方式可以任意更改角度，而不会出现上中方法中的调节困难

 background: repeating-linear-gradient(60deg, #fb3, #fb315px, #58a , #58a 30px);

(这种方法其实相当于将size的控制和gradient的控制合到了一起)
 
五、关于颜色的设定
有时我们希望条纹背景的颜色之间是相近的颜色，但是如果手动设定这个颜色的#很不方便，也很难发现要选择什么样的颜色。可以使用如下方法：

 background: #58a;
 background-image: repeating-linear-gradient(30deg,
 hsla(,%,%,.),
 hsla(,%,%,.)15px,
 transparent ,transparent 30px);

这种方法的原理是：指定背景中最深的颜色，条文中其他相近色用透明度进行调整

六、综合实例
这里效果图一起放上来了，与下面的样式一一对应：

公用部分：

 .stripes {
     height: 250px;
     width: 375px;
     float: left;
     margin: 10px;
     -webkit-background-size: 50px 50px;
     -moz-background-size: 50px 50px;
     background-size: 50px 50px; /* 控制条纹的大小 */  

     -moz-box-shadow: 1px 1px 8px gray;
     -webkit-box-shadow: 1px 1px 8px gray;
     box-shadow: 1px 1px 8px gray;
 }

图1：

 .horizontal {
     background-color: #0ae;
     background-image: -webkit-gradient(linear,  ,  %, color-stop(., rgba(, , , .)), color-stop(., transparent), to(transparent));
     background-image: -moz-linear-gradient(rgba(, , , .) %, transparent %, transparent);
     background-image: -o-linear-gradient(rgba(, , , .) %, transparent %, transparent);
     background-image: linear-gradient(rgba(, , , .) %, transparent %, transparent);
 }

 

图2：

 .vertical {
     background-color: #f90;
     background-image: -webkit-gradient(linear,  , % , color-stop(., rgba(, , , .)), color-stop(., transparent), to(transparent));
     background-image: -moz-linear-gradient(0deg, rgba(, , , .) %, transparent %, transparent);
     background-image: -o-linear-gradient(0deg, rgba(, , , .) %, transparent %, transparent);
     background-image: linear-gradient(0deg, rgba(, , , .) %, transparent %, transparent);
 }

图3：

 .picnic {
     background-color:white;
     background-image: -webkit-gradient(linear,  ,  %, color-stop(., transparent), color-stop(., rgba(, , , .)), to(rgba(, , , .))),
                       -webkit-gradient(linear,  , % , color-stop(., transparent), color-stop(., rgba(, , , .)), to(rgba(, , , .)));
     background-image: -moz-linear-gradient(transparent %, rgba(, , , .) %, rgba(, , , .)),
                       -moz-linear-gradient(0deg, transparent %, rgba(, , , .) %, rgba(, , , .));
     background-image: -o-linear-gradient(transparent %, rgba(, , , .) %, rgba(, , , .)),
                       -o-linear-gradient(0deg, transparent %, rgba(, , , .) %, rgba(, , , .));
     background-image: linear-gradient(transparent %, rgba(, , , .) %, rgba(, , , .)),
                       linear-gradient(0deg, transparent %, rgba(, , , .) %, rgba(, , , .));
 }

图4：

 .picnic {
     background-color:white;
     background-image: -webkit-gradient(linear,  ,  %, color-stop(., transparent), color-stop(., rgba(, , , .)), to(rgba(, , , .))),
                       -webkit-gradient(linear,  , % , color-stop(., transparent), color-stop(., rgba(, , , .)), to(rgba(, , , .)));
     background-image: -moz-linear-gradient(transparent %, rgba(, , , .) %, rgba(, , , .)),
                       -moz-linear-gradient(0deg, transparent %, rgba(, , , .) %, rgba(, , , .));
     background-image: -o-linear-gradient(transparent %, rgba(, , , .) %, rgba(, , , .)),
                       -o-linear-gradient(0deg, transparent %, rgba(, , , .) %, rgba(, , , .));
     background-image: linear-gradient(transparent %, rgba(, , , .) %, rgba(, , , .)),
                       linear-gradient(0deg, transparent %, rgba(, , , .) %, rgba(, , , .));
 }

图5：

 .angled- {
     background-color: #c16;
     background-image: -webkit-gradient(linear,  , % %,
                             color-stop(., rgba(, , , .)), color-stop(., transparent),
                             color-stop(., transparent), color-stop(., rgba(, , , .)),
                             color-stop(., rgba(, , , .)), color-stop(., transparent),
                             to(transparent));
     background-image: -moz-linear-gradient(-45deg, rgba(, , , .) %, transparent %,
                         transparent %, rgba(, , , .) %, rgba(, , , .) %,
                         transparent %, transparent);
     background-image: -o-linear-gradient(-45deg, rgba(, , , .) %, transparent %,
                         transparent %, rgba(, , , .) %, rgba(, , , .) %,
                         transparent %, transparent);
     background-image: linear-gradient(-45deg, rgba(, , , .) %, transparent %,
                         transparent %, rgba(, , , .) %, rgba(, , , .) %,
                         transparent %, transparent);
 }

图6：

 .checkered {
     background-image: -webkit-gradient(linear,  , % %, color-stop(., #), color-stop(., transparent), to(transparent)),
                       -webkit-gradient(linear,  %, % , color-stop(., #), color-stop(., transparent), to(transparent)),
                       -webkit-gradient(linear,  , % %, color-stop(., transparent), color-stop(., #)),
                       -webkit-gradient(linear,  %, % , color-stop(., transparent), color-stop(., #));
     background-image: -moz-linear-gradient(45deg, # %, transparent %, transparent),
                       -moz-linear-gradient(-45deg, # %, transparent %, transparent),
                       -moz-linear-gradient(45deg, transparent %, # %),
                       -moz-linear-gradient(-45deg, transparent %, # %);
     background-image: -o-linear-gradient(45deg, # %, transparent %, transparent),
                       -o-linear-gradient(-45deg, # %, transparent %, transparent),
                       -o-linear-gradient(45deg, transparent %, # %),
                       -o-linear-gradient(-45deg, transparent %, # %);
     background-image: linear-gradient(45deg, # %, transparent %, transparent),
                       linear-gradient(-45deg, # %, transparent %, transparent),
                       linear-gradient(45deg, transparent %, # %),
                       linear-gradient(-45deg, transparent %, # %);
 }

HTML代码：

 <div class="horizontal stripes"></div>
 <div class="vertical stripes"></div>
 <div class="picnic stripes"></div>
 <div class="angled stripes"></div>
 <div class="angled-135 stripes"></div>
 <div class="checkered stripes"></div>