今天遇到这个问题,然后上网搜索了一大堆资料,总的来说实现这个并不是很难,只是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没有引入