zoukankan      html  css  js  c++  java
  • 半透明背景(兼容IE)

    在CSS3中有rgba属性,可以很方便的实现背景透明,但对于IE家族来说却不是那么容易实现;

    FireFox、chrome、opera、safari

    凡是对支持CSS3且支持W3标准的浏览器都可以现实的,比如safari,chrome的webkit核心的浏览器、firefox的Gecko内核、opera的Presto内核(最近传说转向webkit内核);

    格式:background:rgba(255, 0, 0, 0.5);

    background:rgba([red:0~255], [green:0~255], [blue:0~255], [alpha:0~1]);

    IE

    ie系列浏览器使用的是Trident内核(IE10以下不支持CSS3)

    对于IE浏览器实现半透明的方法有两种

    1、alpha滤镜

    这是以前经常使用的方法,利用ie独有的透明滤镜来实现。
    <!--[if IE]>

    <style type="text/css">

    .t{

    background:#f00;

    filter:alpha(opacity=50);

    zoom:1

    }

    .t *{

    position:relative

    }

    </style>

    <![endif]-->

    但是使作这种方法有一个要注间的地方就是,如果这个容器直接包含文本就没法实现文本不透明,必须加一层容器在外围。

    2、渐变效果滤镜

    <!--[if IE]>

    <style type="text/css">

    .t{

    background:transparent;

    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#80FF0000,endColorstr=#80FF0000);

    zoom:1;

    }

    </style>

    <![endif]-->

    注:filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#[[alpha:00~FF][red:00~FF][green:00~FF][blue:00~FF]], endColorstr=#[[alpha:00~FF][red:00~FF][green:00~FF][blue:00~FF]];

    00表示完全透明,FF就是全不透明,转换成十进制的范围就是0~255,如果想实现50%的透明需要进行一下换算,50/100 * 255 = 127.5,按128来算,转换成16进制为80。

     

     

    原文地址:http://www.xwbetter.com/background-trans/

  • 相关阅读:
    初学JS——利用JS制作的别踩白块儿(街机模式) 小游戏
    对于大数据量的Json解析
    Json数据中的特殊字符处理
    移动端总结和手机兼容问题
    在DW 5.5+PhoneGap+Jquery Mobile下搭建移动开发环境
    HTML5所有标签汇总
    二叉树
    二分查找
    归并排序
    希尔排序
  • 原文地址:https://www.cnblogs.com/suizhikuo/p/4164308.html
Copyright © 2011-2022 走看看