zoukankan      html  css  js  c++  java
  • 有趣的CSS3背景 斜条纹

    今天逛的时候发现了一个有趣的css3实现的背景效果,代码实现

    .noaccess {
          position: absolute;
          width: 300px;
          height: 100px;
          z-index: 7;
          background-color: #999;
          opacity: .5;
          top: 0;
          bottom: 0;
          display: block;
          background-image: -webkit-gradient(linear,0 100%,100% 0,color-stop(0.25,rgba(255,255,255,.2)),color-stop(0.25,transparent),color-stop(0.5,transparent),color-stop(0.5,rgba(255,255,255,.2)),color-stop(0.75,rgba(255,255,255,.2)),color-stop(0.75,transparent),to(transparent));
          /* background-image: -webkit-linear-gradient(45deg,rgba(255,255,255,.2) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.2) 50%,rgba(255,255,255,.2) 75%,transparent 75%,transparent); */
          background-image: -moz-linear-gradient(45deg,rgba(255,255,255,.2) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.2) 50%,rgba(255,255,255,.2) 75%,transparent 75%,transparent);
          background-image: -o-linear-gradient(45deg,rgba(255,255,255,.2) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.2) 50%,rgba(255,255,255,.2) 75%,transparent 75%,transparent);
          /* background-image: linear-gradient(45deg,rgba(255,255,255,.2) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.2) 50%,rgba(255,255,255,.2) 75%,transparent 75%,transparent); */
          -webkit-background-size: 32px 32px;
          -moz-background-size: 32px 32px;
          -o-background-size: 32px 32px;
          background-size: 32px 32px;
        }
  • 相关阅读:
    on、where、having的区别(转载)
    Javascript 中的非空判断 undefined,null, NaN的区别
    SRM 223 Div II Level Two: BlackAndRed,O(N)复杂度
    ibatis通过Map封装参数调用存储过程
    NoSQL架构实践
    js实现密码强度验证
    ubuntu 10.04安装qtcreator并汉化
    2017第19周一
    越挫越战,越战越勇
    2017第18周六
  • 原文地址:https://www.cnblogs.com/huangxiaowen/p/4748175.html
Copyright © 2011-2022 走看看