张经纬的博客 -

取消透明度继承的方法

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>
<!-- 主代码 -->

原文链接|

« »

目前 共有 15 条评论 ，点此发表评论

  1. playgoogle.com

    一月 20th, 2009 @ 11:32

    用这种方法的话，就不是父子继承的关系了。感觉和用IFRAME解决IE6 Select 框的BUG 方式一样。

    回复

  2. 张经纬

    一月 20th, 2009 @ 12:03

    是的，为什么这两个层需要父子继承呢？

    回复

  3. xhlv

    一月 20th, 2009 @ 12:31

    还以为真的是取消透明度继承的方法，这只能说是解决透明度问题的方法。

    这两个层不为什么需要父子继承，是因为你的标题是那个意思。

    回复

  4. 张经纬

    一月 20th, 2009 @ 13:00

    这样啊。
    呵呵，时间不多，就先把问题解决了。没想那么多。
    文章里说明一下吧。

    回复

  5. hkysj

    三月 6th, 2009 @ 17:10

    做专题类型的页面还是比较好的。如果大面积使用，效率有点低。ie下面好像因为32768的高度导致进程占用内存过高。

    回复

  6. 张经纬

    三月 7th, 2009 @ 21:11

    @hkysj
    我也发现了这个问题，现在还是用图片（PNG8）来做处理，IE6下的PNG8透明，可以用滤镜，内存占用比这个稍微好一点。

    回复

  7. jun

    三月 28th, 2009 @ 15:40

    我想请教一下，ie下32768高度和ie6png8使用滤镜，它们内存占用率你们是怎么测试的？

    回复

    张经纬 reply on 三月 28th, 2009 15:43:

    @jun
    用PNG24是最好的，在IE6下用滤镜解决半透明的问题。
    本文的方法是思路，不适合用于网页里，内存占用太高。

    回复

  8. jun

    三月 28th, 2009 @ 15:55

    以前看到很多关于CSS渲染的效率问题
    但这个你们是怎么做内存占用率测试的？不是查看任务管理器吧？

    回复

    张经纬 reply on 三月 28th, 2009 21:49:

    @jun
    这个无所谓吧。
    如果要准确，可以用控制面板–>性能–>性能日志和警报–>计数器日志
    自己添加一个观察就行。
    我没有特定的查看方法。

    回复

  9. 癫疯对决

    五月 9th, 2009 @ 20:14

    唉，这欺骗我们自己的眼睛，可惜我遇到的情况却不用这样用。

    回复

    张经纬 reply on 五月 11th, 2009 12:58:

    @癫疯对决
    说说看。

    回复

  10. 肥皂圈

    六月 8th, 2009 @ 14:29

    “我也发现了这个问题，现在还是用图片（PNG8）来做处理，IE6下的PNG8透明，可以用滤镜，内存占用比这个稍微好一点。
    ”

    filter : progid:DXImageTransform.Microsoft.AlphaImageLoader ( enabled=bEnabled , sizingMethod=sSize , src=sURL )

    用这个的话里面的连接会失效的啊,网上说用相对定位解决,但是如果是做类似网页游戏的界面,因为其中涉及的定位比较多和复杂，所以也不好用…

    回复

  11. 张经纬

    六月 10th, 2009 @ 02:21

    @肥皂圈

    如果是纯透明的话，也可以考虑GIF。
    国外有一个对PNG24透明做处理的JS，可以参考。

    网页游戏里面透明的部分太多的话，很消耗系统资源，所以一般情况的话，都用gif好了，背景色不要渐变的太厉害就好。

    回复

  12. clover

    四月 8th, 2010 @ 16:28

    上当了

    回复