zoukankan      html  css  js  c++  java
  • css3实现条纹背景

    <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset='utf-8'/>
    <meta forua="true" http-equiv="Cache-Control" content="no-cache,must-revalidate,max-age=0, proxy-revalidate, s-maxage=0"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta content="yes" name="apple-mobile-web-app-capable" />
    <meta content="black" name="apple-mobile-web-app-status-bar-style" />
    <meta content="telephone=no" name="format-detection" />
    <title>背景</title>
    <style type="text/css">
    body,html{ 100%; height: 100%; margin:0 auto; height: 100%;}
    .bg{height:100%; padding:0; 100%; overflow:hidden; position:relative; background-color: #fffcf9;
    background-image: -webkit-gradient(linear, 0 0, 100% 100%,
    color-stop(.25, rgba(255, 255, 255, .2)), color-stop(.25, #f7f4f1),
    color-stop(.5, #f7f4f1), color-stop(.5, rgba(255, 255, 255, .2)),
    color-stop(.75, rgba(255, 255, 255, .2)), color-stop(.75, #f7f4f1),
    to(#f7f4f1));
    background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, #f7f4f1 25%,
    #f7f4f1 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
    transparent 75%, #f7f4f1);
    background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, #f7f4f1 25%,
    #f7f4f1 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
    #f7f4f1 75%, #f7f4f1);
    background-image: linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, #f7f4f1 25%,
    #f7f4f1 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
    #f7f4f1 75%, #f7f4f1);}
    .stripes {
    overflow:hidden;
    100%;
    /*padding:2%;*/
    height: 100%;
    float: left;
    -webkit-background-size: 8px 8px;
    -moz-background-size: 8px 8px;
    background-size: 8px 8px; /* 控制条纹的大小 */
    }
    </style>
    </head>

    <body>
    <div class="bg stripes">

    </div>
    </body>
    </html>

  • 相关阅读:
    设置github使用的SSH key
    Github的两种协议SSH和HTTPS
    OSChina 周一乱弹 —— 为什么人类和人工智能定要一战
    OSChina 周一乱弹 —— 为什么人类和人工智能定要一战
    APP路由还能这样玩
    APP路由还能这样玩
    APP路由还能这样玩
    APP路由还能这样玩
    掘金技术社区沸点指南(试行版)
    掘金技术社区沸点指南(试行版)
  • 原文地址:https://www.cnblogs.com/xiaotaiyang/p/4806401.html
Copyright © 2011-2022 走看看