zoukankan      html  css  js  c++  java
  • 如何用CSS控制网页背景透明度?

    如何用CSS控制网页背景透明度?这篇文章里我们用一般的思路进行:作两个层,一个用于放文字,另一个用于做透明背景(使用滤镜)。

    IE下的实现方法:

    HTML代码:
    <div class="alpha1">
       <div class="ap2">
           <p>背景为红色(#FF0000),透明度20%。</p>
       </div>
    </div>

    CSS代码:
    .alpha1{
         300px;
         height:200px;
         background-color:#FF0000;
         filter: Alpha(Opacity=30);
    }
    .ap2{
         position:relative;
    }
    这样基本就可以实现啦,也不用担心定位和自适应问题,最大的问题是仅IE支持。
    如果兼容FF、OP怎么写呢?首先,上面这种定法是不行的啦,那就只能用两个层重叠的方法啦。
    改下页面结构与CSS样式:
    HTML代码:
    <div class="alpha1">
       <div class="ap2">
           <p>背景为红色(#FF0000),透明度20%。</p>
       </div>
       <!--[if IE]><![if !IE]><![endif]--> <div class="alpha2"></div> <!--[if IE]><![endif]><![endif]-->
    </div>

    CSS代码:
    .alpha1,.alpha2{
         100%;
         height:auto;
         min-height:250px;
         _height:250px;
         overflow:hidden;
         background-color:#FF0000;
    }
    .alpha1{
         filter:alpha(opacity=20);
    }
    .alpha2{
         background-color:#FFFFFF;
         -moz-opacity:0.8;
         opacity: 0.8;
    }
    .ap2{
         position:absolute;
    }
  • 相关阅读:
    自定义瀑布流
    传值 属性 block 单例 协议
    sqlite数据库中 保存和读取UIData对象
    SQL
    关于在Xcode控制台打印的注意点
    synthesize的作用
    iPhone屏幕尺寸/launch尺寸/icon尺寸
    关于TableView上有一段留白的解决方法
    mac显示隐藏文件
    多线程之GCD
  • 原文地址:https://www.cnblogs.com/zengwei/p/1410896.html
Copyright © 2011-2022 走看看