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 上, 效果

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

解决方法

• http://stackoverflow.com/questions/15076471/proper-use-of-opacity-with-nested-divs
• https://css-tricks.com/non-transparent-elements-inside-transparent-elements/

类 bootstrap 做法

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

使用 rgba

bootstrap model

.modal {
  position: fixed;
  // 都是 0, 占满全屏
  background-color: rgba(0, 0, 0, 0.5);

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