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

Question

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

现在，我喜欢标题所具有的效果，因为你可以看到它背后的图像，但是我希望标题本身在不透明度1处显示为白色。由于不透明度应用于其父div，标题，它看起来像div的其余部分一样褪色。  有没有办法做到这一点？换句话说，有没有办法“覆盖”父元素的不透明度？

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;
}

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

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