CSS中<div>透明度(opacity)与叠放层级(z-index)

原创 2015年11月18日 11:54:49

当我们做前台Web的时候,为了达到预期的效果,经常需要设置div的透明度或者是叠放层级,下面我们就分别来看看如何很好的来使用filter和z-index。

filter

主要语法为:filter: alpha(opacity=80); opacity:0.8;

其中opacity的中文意思为不透明性; 费解; 难懂; 模糊,可想它的值越大越不透明,最小为0,最大为1。值得注意的是,现在许多浏览器都支持opacity:0.8;这样的写法,不用定义filter,但是ie似乎不行。为了兼容性最好都写上。

z-index

当我们定义的CSS中有position属性值为absolute、relative或fixed,z-index方可生效。并且此属性参数值越大,则被层叠在最上面,默认为0。

 

position、opacity与z-index的组合

参考链接:http://www.w3cplus.com/css/what-no-one-told-you-about-z-index.html 在下面的HTML我们写了3个元素,然后每个元素里...
  • qq_26222859
  • qq_26222859
  • 2016年04月16日 12:02
  • 565

z-index与opacity

z-index:auto |
  • wozaixiaoximen
  • wozaixiaoximen
  • 2014年08月07日 16:50
  • 660

opacity和z-index的小bug

今天想让一个div缓慢显示出来,但是出现了当opacity=0.99的时候并依然很模糊的情况,当=1的时候突然就清晰起来。经过思考发现在这个div上还有一个元素,后设置该div的z-index依然无用...
  • yiweichenji
  • yiweichenji
  • 2018年02月04日 17:12
  • 13

Web前端面试指导(四十):CSS3有哪些新特性?

题目点评 CSS3的特性那么多该从哪里说起了?很显然这道题目是有陷阱的,你不可能将所有的特性一个不漏的说出来,就算你说出来,别人还认为你是背的了!所以你主要讲一下在项目中经常用到的Css3的属性就可以...
  • lxcao
  • lxcao
  • 2016年10月12日 15:58
  • 7913

CSS写大叉和红心

Document @font-face {font-family: "iconfont"; src: url('font/iconfont.eot'); ...
  • java_zhaoyanli
  • java_zhaoyanli
  • 2016年05月25日 13:01
  • 2090

解读css盒子模型

Css盒子 第一个问题:css盒子 Css盒子是从内而外分别是border(边框),margin(外边距),padding(内边距),盒子的宽(width),盒子的高(height),再加上最内层...
  • RexingLeung
  • RexingLeung
  • 2017年10月16日 23:24
  • 52

使用z-index和position:absolute实现DIV覆盖和重叠,可实现半透明背景,上边漂浮一层不透明的div层。

使用z-index和position:absolute实现DIV覆盖和重叠
  • baohuan_love
  • baohuan_love
  • 2016年10月12日 14:20
  • 3431

CSS解读之alpha通道与opacity属性的区别

上期在谈到border的用途的时候,在最后列举的两个实例中均用到了一个transparent属性值,从字面意思也知道,这个属性值其实和颜色是并列的,不过它表示的是透明。一般的HTML标签在未指定其背景...
  • qinshenxue
  • qinshenxue
  • 2014年01月02日 09:19
  • 8377

CSS常见问题解决002——opacity将子元素都变透明了

参考链接: http://zhidao.baidu.com/link?url=2FzSxWr5XjVr6rohwvCBgMgXoMVv84js-P9j7eqlS-swdgkt_BRF4hULt2BQ...
  • tongbiaos
  • tongbiaos
  • 2016年08月25日 00:25
  • 3381

如何让div透明,内容不透明

111111 background-color:rgba(255, 255, 255, 0.5); //只要div的style设置这个属性就可以了,网上很多方法都很复杂,其实效果一样...
  • kouwoo
  • kouwoo
  • 2014年12月10日 10:06
  • 5584
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:CSS中<div>透明度(opacity)与叠放层级(z-index)
举报原因:
原因补充:

(最多只允许输入30个字)