CSS 中的不透明度适用于 child div

Question

关于 CSS 中的不透明度属性的问题。我有一个带有标题的 header，并且应用了 .3 的不透明度（以及过渡，但这不是问题所在）。这是一个 gif：

现在，我喜欢 header 的效果，因为您可以清楚地看到它后面的图像，但我希望标题本身显示为白色，不透明度为 1。因为不透明度应用于它parent div，header，它看起来像 div 的其余部分一样褪色。有没有办法做到这一点？换句话说，有没有办法 "override" parent 元素的不透明度？

html,
body {
  margin: 0px;
  padding: 0px;
  height: 100vh;
}

#header {
  position: absolute;
  width: 100vw;
  height: 0vh;
  background-color: black;
  opacity: 0;
  z-index: 6;
  transition: height 1s ease, opacity 1s ease;
}

#hoverable {
  position: absolute;
  height: 10vh;
  width: 100%;
  z-index: 7;
}

#hoverable:hover #header {
  opacity: .3;
  height: 10vh;
}

#title {
  margin-left: 10vw;
  line-height: 10vh;
  float: left;
}

<div id="hoverable">
  <div id="header">
    <div id="title">
      <h1>TITLE</h1>
    </div>
  </div>
</div>

Answer 1

您可以使用 background-color: rgba(0,0,0,0); 和 background-color: rgba(0,0,0,.3);

而不是不透明度

RGBA代表红绿蓝alpha.

html,
body {
  margin: 0px;
  padding: 0px;
  height: 100vh;
}

#header {
  position: absolute;
  width: 100vw;
  height: 0vh;
  background-color: rgba(0,0,0,0);
  z-index: 6;
  transition: height 1s ease, background 1s ease;
}

#hoverable {
  position: absolute;
  height: 10vh;
  width: 100%;
  z-index: 7;
}

#hoverable:hover #header {
  background-color: rgba(0, 0,0,.3);
  height: 10vh;
}

#title {
  margin-left: 10vw;
  line-height: 10vh;
  float: left;
}

<div id="hoverable">
  <div id="header">
    <div id="title">
      <h1>TITLE</h1>
    </div>
  </div>
</div>

Answer 2

我看到您正在为您的 div 使用 Id。也许您可以改用类。

CSS 文件中的样式应该“级联”。因此，从理论上讲，这应该允许样式表中稍后声明的样式覆盖先前声明的样式。但是由于有更具体的选择器（如 ID），这种情况不会像我们希望的那样频繁发生。

例如，如果您有以下 HTML：

<div id="element" class="element">
<!-- stuff goes here... -->
</div>

和CSS：

#element {
background: blue;
}

body div.element {
background: green;
}

尽管 body div.element 选择器出现在 #element ID 选择器之后，尽管“body”元素作为选择器的一部分包含在内，但该元素的背景将为蓝色 —不是绿色 — 因为 ID 选择器比第二个选择器更具体，自然级联已被覆盖。

https://www.impressivewebs.com/difference-class-id-css/

CSS 中的不透明度适用于 child div

Opacity in CSS applying to child div

html

css

colors

opacity