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。

 

相关文章推荐

div 背景透明度如何设置一个div的背景透明度

感谢作者感谢原创~ div 背景透明度如何设置一个div的背景透明度 来源:互联网 作者:佚名 时间:12-31 16:55:48 【大 中小】 如何设置一个div的背景透明度,对于一些...

设置div背景颜色透明度,内部元素不透明

设置div背景颜色透明度,内部元素不透明: .demo{  background-color:rgba(255,255,255,0.15) }  错误方式: .demo{ b...

[转]设置元素透明度,div内子元素不透明opacity

如果要实现透明边框,子元素不透明,那么就要用这个组合:  {filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#3f00...

JS控制DIV的透明度

Layer1.style.alpha = "50%"; 不中? 仅支持 FF document.getElementById("Layer1").style.opacity = "0.5"; IE ...
  • Truong
  • Truong
  • 2014年01月06日 13:18
  • 13761

DIV透明度设置

div id="Layer1" style="position:absolute; width:200px; height:115px; left:50px;top:50px;filter:alp...

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

使用z-index和position:absolute实现DIV覆盖和重叠

position、opacity与z-index的组合

参考链接:http://www.w3cplus.com/css/what-no-one-told-you-about-z-index.html 在下面的HTML我们写了3个元素,然后每个元素里...

CSS Opacity属性对层叠上下文的影响

今天在遇到一个opacity过渡的时候,遇到了一个奇怪的问题: 父元素设置了opacity。 子元素设置了z-index:-1 ...

Opacity 属性引发的层叠问题

Opacity 属性引发的层叠问题总结

style="filter:alpha(opacity=100);position:absolute;z-index:1001;"解析

style里的属性的意思:   filter:alpha(opacity=100);是设置透明度的 position:absolute 设置层位置,absolute是绝对位置 z-index:...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:CSS中<div>透明度(opacity)与叠放层级(z-index)
举报原因:
原因补充:

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