CSS opacity 在嵌套元素中的表现

问题

bootstrap modal 样式实现 http://getbootstrap.com/javascript/#modals-related-target

  • .modal-backdrop 实现 background-color: #000; opacity: 0.5; 透明
  • .modal : z-index.modal-backdrop 大, 除此之外没做啥
    • .modal-dialog : 有 width / margin / background-color 实现居中弹框
      • .modal-content

是不是可以省下 .modal-backdrop , 将 opacity & bg-color 加在 .modal 上, 效果

20161130762QQ20161130-0@2x.png

即使 .modal-dialog 设置了 background-color: #fff; opacity: 1; 还是透明的

解决方法

类 bootstrap 做法

  • 元素1设置 opacity
  • 元素2, z-index 比 1 大, 作为父元素, 覆盖 1
    • 子元素, 就没有这种

使用 rgba

bootstrap model

1
2
3
4
5
6
7
8
9
.modal{
position: fixed;
// 都是 0, 占满全屏
background-color: rgba(0,0,0,0.5);

.modal-dialog{
background-color: #fff;
}
}