opacity/rgba()设置透明度问题

设置opacity元素的所有后代元素会随着一起具有透明性,一般用于调整图片或者模块的整体不透明度。其中文字也会出现透明度,一般通过将文字放置在一个单独<div>中,在通过绝对定位来控制位置:

div{
    opacity:0.3;
    -moz-opacity:0.3;
    filter:alpha(opacity=30);
    background:#000;
    width:500px;
    height:500px;
    color:#F30;
 }

通过rgba()来设置背景透明度解决这一问题

 div{
     //实现FF背景透明,文字不透明(非IE识别)
     background:rgba(0,0,0,0.2) none repeat scroll !important; 
     //实现IE背景透明
    background:#000; 
    filter:Alpha(opacity=20);
    width:500px; 
    color:#F30; 
}
div p{ position:relative;}实现IE文字不透明

火狐我们直接用rgba颜色就可以解决子标签跟着半透明的问题了,但是ie还不是能很好的支持。
所以我们给不想被透明的标签设置一个定位属性,问题接能解决了。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值