css 透明做法

看代码

<div class="top">     <div class="sub">css opacity attribute!</div> </div>

以上结构,如果设置top的opacity属性来达到透明效果时,你会发现,里面的元素全部继承了透明的效果,这显然不能达到要求。至少字体总得看的清楚吧。
从网上搜罗了下相关知识点

先给出标准的css透明写法,兼容大部分浏览器

.top {     filter:alpha(opacity=50);     -moz-opacity:0.5;     -khtml-opacity: 0.5;     opacity: 0.5; }

上面的几个属性分别是:

  • opacity: 0.5; 这是最重要的,因为它是CSS标准.该属性支持Firefox、Safari和 Opera.
  • filter:alpha(opacity=50); 这个是为IE6设的,可取值在0-100,其它三个0到1.
  • -moz-opacity:0.5; 这个是为了支持一些老版本的Mozilla浏览器。
  • -khtml-opacity: 0.5; 这个为了支持一些老版本的Safari浏览器。

上面的例子涉及到透明属性的继承问题

标准的是,当父元素设置了透明属性,其子元素也会跟着继承透明属性,很多会马上想到,把子元素重新设置opacity:1,但是很可惜,这是无效的。有些人为了省时间,可能当子元素里面的内容多少还看得清楚的时候,就这点问题就会忽略不计。当然,也有很多需求是需要完全不透明的内容。

比较有用的一个方法就是,添加多一个div(子元素),这个div和你要显示的内容块是属于兄弟关系,那么给Div和内容块设置绝对定位,然后给div设置透明度,此时的内容块会覆盖在上面,也就模拟了我们所

转载于:https://my.oschina.net/chengcheng/blog/72623

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值