取消透明度继承的方法

Posted 一月 20th, 2009 归属于 CSS

文中的内容使用叠盖的方法组合而成，已经没有继承了，文章标题，有歧义，回复中有朋友提出来了这一点，这里补充说明。

最近做活动页面的时候，遇到一个透明层的问题。当父级元素设置透明度后，子元素继承(inherit)了父元素的透明度值。在网上找了一下，虽然Google到一个取消透明度继承的,但是那个方法用到太多的CSS HACK，指不定什么时候浏览器升级了，这些HACK就成了地雷。于是自己琢磨了一个办法，取消了透明度的继承，并且没有使用到HACK。

思路：
利用相对定位和绝对定位。相对定位撑开高度，绝对定位充当透明层。相对定位的元素盖在绝对定位的层上。

问题：
绝对定位中没有内容，要事先声明有一个绝对高的高度，但是不能超过32768像素。

Demo：
http://www.zhangjingwei.com/demo/fix_opacity/

样式表如下

body {
	background:url(http://www.google.com/intl/en_ALL/images/logo.gif) repeat;
}
#wrap_1 {
	width:300px;
	padding:20px;
	color:#F00;
	background:#000;
	position:relative;
	filter:alpha(opacity=50);
	-ms-filter:"alpha(opacity=50)";
	-moz-opacity:0.5;
	-khtml-opacity: 0.5;
	opacity:0.5;
}
#wrap_2 {
	width:300px;
	padding:20px;
	color:#F00;
	position:relative; /*父元素为相对定位*/
	overflow:hidden;
}
#wrap_2_content {
	position:relative; /*内容相对定位，盖在透明层上*/
}
#wrap_2 .fixopacity {
	width:340px;
	background:#000;
	height:32768px; /*一个足够高的高度*/
	position:absolute; /*使用绝对定位*/
	top:0;
	left:0;
	z-index:-1; /*置于最低层*/
	filter:alpha(opacity=50);
	-ms-filter:"alpha(opacity=50)";
	-moz-opacity:0.5;
	-khtml-opacity: 0.5;
	opacity:0.5;
}
.bk10 {height:10px; font-size:1px; clear:both; overflow:hidden;}

HTML代码如下

<div id="wrap_1">
  <h1>没有取消透明度的继承的样子</h1>
  <p>当我们设置了父级元素透明度的时候，子元素往往都会继承这个透明度。本例旨在演示取消这个透明度。<br />
    <br />
    <img src="http://at.the9.com/images/library/common/library_logo.png" width="105" height="113" /></p>
</div>
<div class="bk10"></div>
<!-- 主代码 -->
<div id="wrap_2">
  <div id="wrap_2_content">
    <h1>取消透明度的继承的样子</h1>
    <p>当我们设置了父级元素透明度的时候，子元素往往都会继承这个透明度。本例旨在演示取消这个透明度。<br />
      <br />
      <img src="http://at.the9.com/images/library/common/library_logo.png" width="105" height="113" /></p>
  </div>
  <div class="fixopacity"></div>
</div>
<!-- 主代码 -->

原文链接(1,184 views)|评论 (15)

« 上一页