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元素事件时，这个不透明度会被继承＃39; m在不透明度上使用!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。

Browser support同样相当不错。

另外，我在你的问题中读到了这个，＆＃34;问题是这种不透明性是继承的＆＃34;

不，它没有被继承。

Answer 2

了解opacity设置元素及其所有子元素的不透明度值非常重要;其中RGBA仅为单个声明设置不透明度值。

所以你应该使用类似的东西：

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

（当然，您也可以使用HSLA - 属性。）

请注意，opacity - 属性并非所有浏览器都完全支持，请查看此SA主题以获取更多相关信息：CSS background opacity with rgba not working in IE 8

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

2 个答案: