即使明确声明,也不会从父级继承Opacity声明

Question

我有以下CSS

.dropdown-menu {
  background-color: black;
  opacity: 0.6;
  color: white;
}
.dropdown-menu > li {
  background-color: black;
  opacity: 1;
  color: white;
}

当HTML元素(使用这个上面CSS)加载我越来越不透明度设置为从预期的.dropdown-menu,问题是,这不透明度里面继承dropdown-menu > li元素的事件,当我使用!important的透明度声明.

那么如何克服这个问题(不透明度应该在父元素上保持0.6)并且在这个孩子上我想要不透明度1？

Answer 1

而不是使用opacity父元素,以rgba格式声明您的颜色.

.dropdown-menu {
  background-color: rgba(0,0,0,.6);
  color: rgba(255,255,255,.6);   
}

这样,您将保留opacity父元素,并且您的子元素的不透明度为1.

浏览器对它的支持也相当不错.

另外,我在你的问题中读到了这个问题,"问题在于这种不透明性是继承的"

不,它不是遗传的.