<分区>
<分区>
我有以下 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？
最佳答案
不要为父元素使用 opacity，而是以 rgba 格式声明颜色。
.dropdown-menu {
background-color: rgba(0,0,0,.6);
color: rgba(255,255,255,.6);
}
这样，您将保留父元素的不透明度，并且您的子元素的不透明度将为 1。
Browser support同样也很不错。
另外，我在你的问题中读到这个，“问题是这种不透明度是继承的”
不，它不是继承的。
关于html - 即使显式声明，不透明度声明也是从父级继承的，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33719223/