zoukankan      html  css  js  c++  java
  • RGBa颜色 css3的Alpha通道支持

        CSS3中,RGBa 为颜色声明添加Alpha通道。

        RGB值被指定使用3个8位无符号整数(0 – 255)并分别代表红色、蓝色、和绿色。增加的一个alpha通道并不是一个颜色通道——它只是用来指定除其它三个通道提供的颜色信息之外的透明度。

        

    <ul>
        <li class="hundred">100%</li>
        <li class="eighty">80%</li>
        <li class="sixty">60%</li>
        <li class="forty">40%</li>
        <li class="twenty">20%</li>
    </ul>

    CSS样式

    ul{list-style: none}
    ul li{padding:.5em}
    ul li.hundred{background:rgba(0,0,255,1)}
    ul li.eighty{background:rgba(0,0,255,0.8)}
    ul li.sixty{background:rgba(0,0,255,0.6)}
    ul li.forty{background:rgba(0,0,255,0.4)}
    ul li.twenty{background:rgba(0,0,255,0.2)}

    兼容性写法

      

    div {
       background: rgb(200, 54, 54); /* 向下兼容 */
       background: rgba(200, 54, 54, 0.5);
    }

            浏览器对”color:rgb” 和”color:rgba” 是分开处理的。        

    RGBa的浏览器支持情况

    浏览器,版本,操作系统测试结果退路
    Firefox 3.0+ 支持
    Firefox 2.0- 不支持 纯色
    webkit -safari 3.x+ 支持
    webkit -safari 2.0- 不支持
    Mobile Safari (iPhone/iPod Touch /iPad) 支持
    opera 10.x+ 支持
    Opera 9.x- 不支持 纯色
    IE 5.5 - 不支持 无色
    IE 6-8 不支持 纯色
    IE 9 支持
    Google Chrome 所有版本 支持
    Netscape 所有版本 不支持 没有颜色
    SeaMonkey 1.1.x 不支持 无色
    SeaMonkey 2.0 + 支持
    BlackBerry Storm Browser 支持

    IE下面的实现:

    <!--[if IE]>
       <style type="text/css">
       .color-block {
           background:transparent;
           filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000050,endColorstr=#99000050);
           zoom: 1;
        } 
        </style>
    <![endif]-->
  • 相关阅读:
    总结mysql服务器查询慢原因与解决方法
    mysql查询今天,昨天,近7天,近30天,本月,上一月数据的方法
    Github 终于开始认真考虑开源项目许可证了
    mysql 外连接总结
    MYSQL--事务处理
    MySQL 索引详解
    MySQL数据库优化总结
    Delphi 2010 安装及调试
    Delphi 2010
    PostgreSQL 8.4.1
  • 原文地址:https://www.cnblogs.com/dying/p/3346192.html
Copyright © 2011-2022 走看看