- 先看一个demo
// html
<div class="father">
<div class="son" style="margin-left: 200px"></div>
</div>
// css
div {
width: 100px;
height: 100px;
background-color: red;
}
.father {
opacity: 0;
}
.son {
opacity: 1;
}
- 我希望子元素显示出来，但它却隐藏了，opacity:1好像没起作用
- 经查阅文档，子元素opacity透明度是以父元素opacity透明度为基础计算得来
- 如上父元素opacity为0，那么子元素opacity即使被设置为了1，最终子元素透明度的计算结果为 0 × 1 === 0
- 所以子元素依然透明
解决方案可参考如下
- 法一 : 从父子结构改造为兄弟结构
- 法二 : 不使用opacity，使用css3属性rgba()设置透明度
