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


    一、横向条纹
    如下代码:

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

     

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

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

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

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

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

    1 background: #58a;     
    2 background-image: repeating-linear-gradient(30deg,     
    3 hsla(0,0%,100%,.1),     
    4 hsla(0,0%,100%,.1)15px,     
    5 transparent 0,transparent 30px);

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

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

    公用部分:

     1 .stripes {   
     2     height: 250px;   
     3      375px;   
     4     float: left;   
     5     margin: 10px;        
     6     -webkit-background-size: 50px 50px;   
     7     -moz-background-size: 50px 50px;   
     8     background-size: 50px 50px; /* 控制条纹的大小 */  
     9        
    10     -moz-box-shadow: 1px 1px 8px gray;   
    11     -webkit-box-shadow: 1px 1px 8px gray;   
    12     box-shadow: 1px 1px 8px gray;   
    13 }

    图1:

    1 .horizontal {   
    2     background-color: #0ae;   
    3     background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.5, transparent), to(transparent));   
    4     background-image: -moz-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);   
    5     background-image: -o-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);   
    6     background-image: linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);   
    7 }
     
    图2:
    1 .vertical {   
    2     background-color: #f90;   
    3     background-image: -webkit-gradient(linear, 0 0, 100% 0, color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.5, transparent), to(transparent));   
    4     background-image: -moz-linear-gradient(0deg, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);   
    5     background-image: -o-linear-gradient(0deg, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);   
    6     background-image: linear-gradient(0deg, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);   
    7 }

    图3:

     1 .picnic {   
     2     background-color:white;   
     3     background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.5, transparent), color-stop(.5, rgba(200, 0, 0, .5)), to(rgba(200, 0, 0, .5))),   
     4                       -webkit-gradient(linear, 0 0, 100% 0, color-stop(.5, transparent), color-stop(.5, rgba(200, 0, 0, .5)), to(rgba(200, 0, 0, .5)));   
     5     background-image: -moz-linear-gradient(transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5)),   
     6                       -moz-linear-gradient(0deg, transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5));   
     7     background-image: -o-linear-gradient(transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5)),   
     8                       -o-linear-gradient(0deg, transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5));   
     9     background-image: linear-gradient(transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5)),   
    10                       linear-gradient(0deg, transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5));   
    11 }

    图4:

     1 .picnic {   
     2     background-color:white;   
     3     background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.5, transparent), color-stop(.5, rgba(200, 0, 0, .5)), to(rgba(200, 0, 0, .5))),   
     4                       -webkit-gradient(linear, 0 0, 100% 0, color-stop(.5, transparent), color-stop(.5, rgba(200, 0, 0, .5)), to(rgba(200, 0, 0, .5)));   
     5     background-image: -moz-linear-gradient(transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5)),   
     6                       -moz-linear-gradient(0deg, transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5));   
     7     background-image: -o-linear-gradient(transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5)),   
     8                       -o-linear-gradient(0deg, transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5));   
     9     background-image: linear-gradient(transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5)),   
    10                       linear-gradient(0deg, transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5));   
    11 }

    图5:

     1 .angled-135 {   
     2     background-color: #c16;   
     3     background-image: -webkit-gradient(linear, 0 0, 100% 100%,   
     4                             color-stop(.25, rgba(255, 255, 255, .2)), color-stop(.25, transparent),   
     5                             color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .2)),   
     6                             color-stop(.75, rgba(255, 255, 255, .2)), color-stop(.75, transparent),   
     7                             to(transparent));   
     8     background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,   
     9                         transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,   
    10                         transparent 75%, transparent);   
    11     background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,   
    12                         transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,   
    13                         transparent 75%, transparent);   
    14     background-image: linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,   
    15                         transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,   
    16                         transparent 75%, transparent);   
    17 }

    图6:

     1 .checkered {   
     2     background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, #555), color-stop(.25, transparent), to(transparent)),   
     3                       -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, #555), color-stop(.25, transparent), to(transparent)),   
     4                       -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.75, transparent), color-stop(.75, #555)),   
     5                       -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.75, transparent), color-stop(.75, #555));   
     6     background-image: -moz-linear-gradient(45deg, #555 25%, transparent 25%, transparent),   
     7                       -moz-linear-gradient(-45deg, #555 25%, transparent 25%, transparent),   
     8                       -moz-linear-gradient(45deg, transparent 75%, #555 75%),   
     9                       -moz-linear-gradient(-45deg, transparent 75%, #555 75%);   
    10     background-image: -o-linear-gradient(45deg, #555 25%, transparent 25%, transparent),   
    11                       -o-linear-gradient(-45deg, #555 25%, transparent 25%, transparent),   
    12                       -o-linear-gradient(45deg, transparent 75%, #555 75%),   
    13                       -o-linear-gradient(-45deg, transparent 75%, #555 75%);   
    14     background-image: linear-gradient(45deg, #555 25%, transparent 25%, transparent),   
    15                       linear-gradient(-45deg, #555 25%, transparent 25%, transparent),   
    16                       linear-gradient(45deg, transparent 75%, #555 75%),   
    17                       linear-gradient(-45deg, transparent 75%, #555 75%);   
    18 }

    HTML代码:

    1 <div class="horizontal stripes"></div>  
    2 <div class="vertical stripes"></div>  
    3 <div class="picnic stripes"></div>  
    4 <div class="angled stripes"></div>  
    5 <div class="angled-135 stripes"></div>  
    6 <div class="checkered stripes"></div>
  • 相关阅读:
    微信公众平台开发者中心安全模式消息体加解密实现
    AES对称加密算法原理
    Token验证失败
    PaySignKey
    UVA 11732
    lua中的pairs和ipairs差别
    【shell学习笔记】curl命令总结
    视频监控系统:C/S &amp; B/S
    Android app开发中用户协议(使用条款)文字自己主动换行
    uva 10154
  • 原文地址:https://www.cnblogs.com/ypppt/p/13114244.html
走看看 - 开发者的网上家园