如何实现父容器透明而子容器不透明

作者:课课家教育更新于： 2016-10-19 09:16:08

　　在css中，为图片设置透明是件非常容易的事情，通常情况下，如果我们为父容器设置了透明度，子容器将会继承父容器的这一性质。但如果我们不想子容器也随父容器透明，这该如何实现呢？下面课课家网站为大家带来两个解决之道。

　　方法一：

　　众所周知，在CSS中,浏览器兼容是一个相当令人头疼的问题。所以此方法，我们分别从IE和firefox两种浏览器考虑。

　　我们都知道，当一个块级元素的position样式为absolute的时候，元素的布局不依赖于父容器，同样地，透明度也会跟容器无关，但是absolute会破坏原始布局。不过IE有个特点，position被显式设置为relative的时候，透明度也跟absolute时的状态一样，所以针对IE，我们可以在子容器添加：

　　position:relative;

　　但是此法对Firefox不起作用，所以只能利用background将透明的部分放到图片里面。

　　background:url(images/boxBg.png);

　　*background:#CCCCCC;

　　方法二：

　　请大家注意，下面介绍的方法只是规避了透明度的继承问题，并不是真正意义上解决透明度继承问题，具体操作如下：

　　构造三个容器。首先，让需要透明的容器和不透明容器保持兄弟关系。然后，通过父容器控制大小让两个兄弟容器通过定位保持一个看似父子的排列方式。

　　虽然方法二并不是真正意义上解决透明度的继承问题，但是俗话说得好，不管黑猫白猫，抓到老鼠的就是好猫。同样能解决问题的方法就是好方法。如果大家在实际操作中遇到类似的问题，不妨参考一下我们课课家为你提供的两种方法，看能不能解决问题!