zoukankan      html  css  js  c++  java
  • 背景半透明rgba最佳实践

    by 一丝

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>背景半透明rgba最佳实践</title>
        <style>
        </style>
      </head>
      <body>
        <div class="main">
          <div class="demo demo1"><a href="http://www.css88.com/demo/hex_color/">转换工具</a></div>
          <div class="demo demo2"><a href="http://www.css88.com/demo/hex_color/">转换工具</a></div>
        </div>  
      </body>
    </html>
    

    body { 
      background: url(http://ww4.sinaimg.cn/cmw205/90f78f62jw1eafnlnk7cqj20q00yon2w.jpg) no-repeat 50% 0;
    
    }
    
    .demo {
       100px;
      height: 100px;
      line-height: 100px;
      margin: 20px auto;
      border: 1px solid #000;
      text-align: center;
      color: green;
    }
    
    .demo1 {
      background:rgba(0, 0, 0, .3);
    }
    
    .demo2 {
      background:rgba(0, 0, 0, .3);
      filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#4c000000', EndColorStr='#4c000000');
    }
    
    /* 
     * IE9 由于rgba和filter都支持,会导致两个颜色叠加,使用hack去除 
     * 9 代表 IE9 以下浏览器支持
     * :root 只有 IE9+ 以及其他现代浏览器支持
     * IE10 以上不再支持 filter
    */
    
    :root * {
      filter: none9 !important;
    }
    

  • 相关阅读:
    VS2010如何以管理员权限启动? 转载
    ArcGIS属性编辑字符型字段值出现乱码问题
    点批量移动到线上(ArcGis版) 转载
    C#判断数据库中取出的字段值是否为空(NULL) .
    方框内打勾(钩)的符号(word和excel)
    C# 获取屏幕的大小
    神通数据库的备份和还原
    推荐系列文章:《DotText源码阅读》
    Lucene.Net 2.3.1开发介绍 —— 阅读索引(转载)
    Lucene.Net:使用eaglet的盘古分词进行分词和搜索(转载)
  • 原文地址:https://www.cnblogs.com/rubylouvre/p/3782760.html
Copyright © 2011-2022 走看看