一个关于透明度继承的问题

取这个标题我很胆怯,因为我始终不敢确定这个到底是不是透明度的继承!但是我没相到更好的标题,那也只能用这个比较形象的标题了。

?

在前端开发的时候,经常用到板块背景的透明度,

例如这样的结构:

XML/HTML代码
  1. <div?class=“div1”>这里文字图片都带透明度了 ??
  2. ??<div?class=“div2”>图片</div>??
  3. </div>??

样式

CSS代码
  1. body?{ ??
  2. ????background-image😕url(https://www.html.cn/demo/jQuery/blockSlide/2009-02-04_105247.png); ??
  3. ????background-repeat😕repeat; ??
  4. } ??
  5. .div1{?width:200px;?height:200px;?background:#FFFFFF;filter:alpha(opacity=70);opacity:0.7;} ??
  6. .div2{?width:100px;?height:100px;?background😕url(https://www.html.cn/images/testbok.png)}??

这样里面的容器div2就“继承了”外面容器div1的透明度,也变成了70%的透明。ie6-ie8,ff,及其他都是一样。

查看demo中的示例1:https://www.html.cn/demo/opacity/opacity.html

这根本不是设计师的本意。设计师只要使背景透明,里面的内容不透明。

那么我是这么解决的:

?

XML/HTML代码
  1. <div?class=“div3”><div?class=“div4”></div>这里文字图片都没透明度了 ??
  2. ??<div?class=“div2”>图片</div>??
  3. </div>??

?

CSS代码
  1. body?{ ??
  2. ????background-image😕url(https://www.html.cn/demo/jQuery/blockSlide/2009-02-04_105247.png); ??
  3. ????background-repeat😕repeat; ??
  4. } ??
  5. .div2{?width:100px;?height:100px;?background😕url(https://www.html.cn/images/testbok.png)} ??
  6. .div3{?width:200px;?height:200px;?position:relative;?margin-top:10px} ??
  7. .div4{??position:absolute;?top:0;?height:200px;?width:200px;?z-index:-1;?background:#FFFFFF;filter:alpha(opacity=70);opacity:0.7;}??

查看demo中的示例2:https://www.html.cn/demo/opacity/opacity.html

如果你外面的容器高度是不定的,那么只要把div3的高度设置的足够的高度就可以了

这个方法有个很不好的缺点:多了一个空白的div

注:在ie8的bate版下可以这样来解决问题:

XML/HTML代码
  1. <div?class=“div1”>这里文字图片都带透明度了 ??
  2. ??<div?class=“div2”>图片</div>??
  3. </div>??
CSS代码
  1. body?{ ??
  2. ????background-image😕url(https://www.html.cn/demo/jQuery/blockSlide/2009-02-04_105247.png); ??
  3. ????background-repeat😕repeat; ??
  4. } ??
  5. .div1{?width:200px;?height:200px;?background:#FFFFFF;filter:alpha(opacity=70);opacity:0.7;} ??
  6. .div2{?width:100px;?height:100px;?position:relative; background😕url(https://www.html.cn/images/testbok.png)}??

就是在div2里加了position:relative;但是在其他浏览器下面是无效的。

大家如果有更好的办法欢迎留言斧正!

赞(1) 打赏
未经允许不得转载:WEB前端开发 » 一个关于透明度继承的问题

评论 23

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #-49

    谢谢,正好碰到这样的问题。。

    网站模板8年前 (2011-03-16)回复
  2. #-48

    FF下面还是无效呀

    berry7年前 (2011-12-27)回复

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏