您的位置:首页 » 分类: HTML+CSS » 文章: 一个关于透明度继承的问题

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

小编推荐:掘金是一个高质量的技术社区,从 ECMAScript 6 到 Vue.js,性能优化到开源类库,让你不错过前端开发的每一个技术干货。各大应用市场搜索「掘金」即可下载APP,技术干货尽在掌握..

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

 

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

例如这样的结构:

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

样式

CSS代码
  1. body {   
  2.     background-imageurl(http://www.css88.com/demo/jQuery/blockSlide/2009-02-04_105247.png);   
  3.     background-repeatrepeat;   
  4. }   
  5. .div1{ width:200pxheight:200pxbackground:#FFFFFF;filter:alpha(opacity=70);opacity:0.7;}   
  6. .div2{ width:100pxheight:100pxbackgroundurl(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代码
  1. <div class=“div3”><div class=“div4”></div>这里文字图片都没透明度了   
  2.   <div class=“div2”>图片</div>  
  3. </div>  

 

CSS代码
  1. body {   
  2.     background-imageurl(http://www.css88.com/demo/jQuery/blockSlide/2009-02-04_105247.png);   
  3.     background-repeatrepeat;   
  4. }   
  5. .div2{ width:100pxheight:100pxbackgroundurl(http://www.css88.com/images/testbok.png)}   
  6. .div3{ width:200pxheight:200pxposition:relativemargin-top:10px}   
  7. .div4{  position:absolutetop:0; height:200pxwidth:200pxz-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代码
  1. <div class=“div1”>这里文字图片都带透明度了   
  2.   <div class=“div2”>图片</div>  
  3. </div>  
CSS代码
  1. body {   
  2.     background-imageurl(http://www.css88.com/demo/jQuery/blockSlide/2009-02-04_105247.png);   
  3.     background-repeatrepeat;   
  4. }   
  5. .div1{ width:200pxheight:200pxbackground:#FFFFFF;filter:alpha(opacity=70);opacity:0.7;}   
  6. .div2{ width:100pxheight:100pxposition:relative; backgroundurl(http://www.css88.com/images/testbok.png)}  

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

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

正文完。下面还有一个推广让最好的人才遇见更好的机会!

互联网行业的年轻人,他们面对着怎样的职业瓶颈、困惑与未来选择?过去,这鲜有人关心。资深的职场人,也多半优先选择熟人去推荐机会。

100offer致力于改变现状,帮互联网行业最好的人才发现更好的机会。使用 100offer.com 或 100offer App ,可以一周内获得中国、美国等数千家优质企业的工作机会。

马上去遇见更好的机会
推广结束

关注WEB前端开发官方公众号

关注国内外最新最好的前端开发技术干货,获取最新前端开发资讯,致力于打造高质量的前端技术分享公众号

23 条评论 - 关于 “一个关于透明度继承的问题

发表评论

电子邮件地址不会被公开。 必填项已用*标注