当前位置:首页 » 前端 » 本页

背景半透明且文字不透明的CSS写法(兼容所有浏览器,IE) In 前端  @2013-03-13 8,047 Vs

在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。


打签» , , ,   评论» 抢沙发

↓↓↓ 支持我们 ↓↓↓



我说两句 »

Ctrl+Enter

注意: 评论者允许使用'@user空格'的方式将自己的评论通知另外评论者。例如, ABC是本文的评论者之一,则使用'@ABC '(不包括单引号)将会自动将您的评论发送给ABC。使用'@all ',将会将评论发送给之前所有其它评论者。请务必注意user必须和评论者名相匹配(大小写一致)。

搜索

返回顶部