今天遇到这个问题，然后上网搜索了一大堆资料，总的来说实现这个并不是很难，只是IE比较坑,要各种兼容
1、可以写两个层级啊 然后设置zindex就好了 ，这也是个办法 但是如果用到opacity的时候IE8一下就不能识别了
2，如果背景这个层级中添加了文字或者别的内容 上面的就不能成功了
如上图，这样里面的内容也是透明的 因为如果父级元素设置了opacity，他的子集元素会继承
所以将下面代码改下
css3中新增加的rgba就可以解决这个问题，这样里面的内容不会透明，但是在IE下面又出现问题了，IE8及以下看不懂rgba这个属性，所以将这个直接看成了null
如何解决这个问题：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .dv{ width: 200px; height: 200px; background: #333333; background: rgba(0,0,0,0.5);/* IE6、7、8只能设置position:static(默认属性) ，否则会导致子元素继承Alpha值 * filter:Alpha(opacity=50); position: static;/* IE6、7、8只能设置position:static(默认属性) ，否则会导致子元素继承Alpha值 */ *zoom:1 /* 激活IE6、7的haslayout属性，让它读懂Alpha */ } </style> </head> <body> <section> <div class="dv"> <p style="color: red; position: relative">你好</p> /* 设置子元素为相对定位，可让子元素不继承Alpha值 */ </div> </section> </body> </html>
有个h5语义标签htmlshiv.js没有引入
扫描二维码关注公众号，回复：
2102898 查看本文章
