zoukankan      html  css  js  c++  java
  • 兼容多浏览器的CSS背景透明

    在CSS中有一个Alpha滤镜,这个滤镜可以设置目标元素的透明度。还可以通过指定坐标,从而实现各种不通范围的透明度。具体语法如下:

    引用内容:
    {filter: alpha(opacity=opacity,finishopacity=finishopacity,style=style,startx=startx,starty=starty,finishx=finishx,finishy=finishy)}

    具体参数:
    opacity 透明度。默认的范围是从0 到 100,他们其实是百分比的形式。也就是说,0代表完全透明,100代表完全不透明。
    finishopacity 是一个可选参数,如果想要设置渐变的透明效果,就可以使用他们来指定结束时的透明度。范围也是0 到 100。
    style    指定透明区域的形状特征:0 代表统一形状,1 代表线形,2 代表放射状,3 代表矩形
    startx   渐变透明效果开始处的 X坐标。
    starty   渐变透明效果开始处的 Y坐标。
    finishx 渐变透明效果结束处的 X坐标。
    finishy 渐变透明效果结束处的 Y坐标。

    测试:

    filter:alpha(opacity=50);

    #snake{
    backgournd: #666;
    filter:alpha(opacity=50); /*IE*/
    -moz-opacity:0.5; /*MOZ , FF*/
    opacity:0.5; /*CSS3, FF1.5*/
    }

    <div id=”snake” >背景透明效果</div>

    /****************百度的这个例子更简单,哈哈
    //透明层
    <div id=”dialogBoxBG” style=”position: absolute; top: 0px; left: 0px; 100%; height: 2999px; z-index: 10001; opacity: 0.4; background-color: #eeeeee;”/>

    //透明层上面的浮动层 如登陆表单等等。
    <div id=”dialogBox” style=”border: 1px solid #709cd2; z-index: 10003; position: absolute; 440px; left: 410.5px; top: 128px;”>

    opacity:0.4    //这种写法只适用于FF
    filter:alpha(opacity=50);   //这种写法只适用于IE
    所以要这两种同时写上就能兼容了

  • 相关阅读:
    【CSS3】响应式布局
    【jQuery插件】pagepiling滚屏插件使用
    【README.md】Markdown语言常用语法
    【页面架构】水平居中+垂直居中
    【页面架构】垂直居中
    【页面架构】水平居中
    【转载】css3动画简介以及动画库animate.css的使用
    【前端学习笔记】登录验证案例
    bzoj 3569 DZY Loves Chinese II 随机算法 树上倍增
    bzoj 1018 堵塞的交通traffic 线段树
  • 原文地址:https://www.cnblogs.com/shihao/p/2183055.html
Copyright © 2011-2022 走看看