http://www.css88.com/archives/746
取这个标题我很胆怯，因为我始终不敢确定这个到底是不是透明度的继承！但是我没相到更好的标题，那也只能用这个比较形象的标题了。
在前端开发的时候，经常用到板块背景的透明度，
例如这样的结构：
XML/HTML代码
- <div class=“div1″>这里文字图片都带透明度了
- <div class=“div2″>图片</div>
- </div>
样式
CSS代码
- body {
- background-image: url(http://www.css88.com/demo/jQuery/blockSlide/2009-02-04_105247.png);
- background-repeat: repeat;
- }
- .div1{ width:200px; height:200px; background:#FFFFFF;filter:alpha(opacity=70);opacity:0.7;}
- .div2{ width:100px; height:100px; background: url(http://www.css88.com/images/testbok.png)}
这样里面的容器div2就“继承了”外面容器div1的透明度，也变成了70%的透明。ie6-ie8,ff,及其他都是一样。
查看demo中的示例1：http://www.css88.com/demo/opacity/opacity.html
这根本不是设计师的本意。设计师只要使背景透明，里面的内容不透明。
那么我是这么解决的：
XML/HTML代码
- <div class=“div3″><div class=“div4″></div>这里文字图片都没透明度了
- <div class=“div2″>图片</div>
- </div>
CSS代码
- body {
- background-image: url(http://www.css88.com/demo/jQuery/blockSlide/2009-02-04_105247.png);
- background-repeat: repeat;
- }
- .div2{ width:100px; height:100px; background: url(http://www.css88.com/images/testbok.png)}
- .div3{ width:200px; height:200px; position:relative; margin-top:10px}
- .div4{ position:absolute; top:0; height:200px; width:200px; z-index:-1; background:#FFFFFF;filter:alpha(opacity=70);opacity:0.7;}
查看demo中的示例2：http://www.css88.com/demo/opacity/opacity.html
如果你外面的容器高度是不定的，那么只要把div3的高度设置的足够的高度就可以了
这个方法有个很不好的缺点：多了一个空白的div
注：在ie8的bate版下可以这样来解决问题：
XML/HTML代码
- <div class=“div1″>这里文字图片都带透明度了
- <div class=“div2″>图片</div>
- </div>
CSS代码
- body {
- background-image: url(http://www.css88.com/demo/jQuery/blockSlide/2009-02-04_105247.png);
- background-repeat: repeat;
- }
- .div1{ width:200px; height:200px; background:#FFFFFF;filter:alpha(opacity=70);opacity:0.7;}
- .div2{ width:100px; height:100px; position:relative; background: url(http://www.css88.com/images/testbok.png)}
就是在div2里加了position:relative;但是在其他浏览器下面是无效的。
大家如果有更好的办法欢迎留言斧正！
16 个引用通告
[...] 一个关于透明度继承的问题 [...]
[...] 一个关于透明度继承的问题 [...]
[...] 一个关于透明度继承的问题 [...]
[...] 一个关于透明度继承的问题 [...]
[...] 一个关于透明度继承的问题 [...]
[...] 一个关于透明度继承的问题 [...]
[...] 搜了一下，找到一个不错的实现这种效果的方法 – 一个关于透明继承度的问题，有兴趣的朋友可以看看。原理很简单，添加一个空元素作为透明层，和不想透明但是要实现覆盖效果的元素为同级元素。父级元素使用position:relative定位; 两个子元素使用position:absolute定位，实现覆盖。 [...]
[...] 一个关于透明度继承的问题 [...]
[...] 一个关于透明度继承的问题 [...]
[...] 一个关于透明度继承的问题 [...]
[...] 一个关于透明度继承的问题 [...]
[...] goo了一gle，找到这篇文章， [...]
[...] 搜了一下，找到一个不错的实现这种效果的方法 – 一个关于透明继承度的问题，有兴趣的朋友可以看看。原理很简单，添加一个空元素作为透明层，和不想透明但是要实现覆盖效果的元素为同级元素。父级元素使用position:relative定位; 两个子元素使用position:absolute定位，实现覆盖。 Tags: alpha, css, filter, opacity micky | 三 24th, 2010 | Web. Trackback from your site. [...]
[...] 一个关于透明度继承的问题 [...]
[...] 一个关于透明度继承的问题 [...]
[...] 解决方案： 一个关于透明继承度的问题 [...]