12
11
2011
0

css:opacity对after&before 关于z-index上的干扰 记录

PS:测试环境 FF8

css代码如下:(不加opacity的css)

.tip{
	box-shadow:1px 1px 4px black;
	position:relative;
	margin:20px;
	display:inline-block;
	background-color:black;
	border-radius:8px;
	color:white;
	padding:7px;

}
.tip:after{
	box-shadow:1px 1px 4px red;
	position:absolute;
	bottom:-6px;
	left:50%;
	margin-left:-6px;
	border:6px solid red;
	
	-moz-transform:rotate(45deg);
	z-index: -1;
	content:"";
}

html代码

	<div class="tip">提示^
	</div>

效果如下(不加opacity的效果):

但是对div加上opacity设置后(就是给其加上透明度,opacity:1;除外!),如下所示

 

提示^

很奇怪,after的内容显示到了前段,虽然给其z-index:-1,在不加透明度的时候是正确的……

 

更新记录2013年6月:

多年后的今天,终于发现一文讲述到此情况的,见:http://www.cnblogs.com/101rico/archive/2013/06/11/3131630.html,届时测试后我会写篇文章研究下的。

Category: Web设计 | Tags: css opacity z-index | Read Count: 1713

登录 *


loading captcha image...
(输入验证码)
or Ctrl+Enter

Host by is-Programmer.com | Power by Chito 1.3.3 beta | Theme: Aeros 2.0 by TheBuckmaker.com