Question

我希望父div用透明背景填充屏幕，但我似乎无法使用以下代码。

父div仅显示为纯色。

任何想法我做错了什么：

＆＃13;

.outer {
  position: relative;
  z-index: 1;
  background-color: rgba(255, 255, 255, 0.5);
  height: 100%;
}
.inner {
  position: absolute;
  width: 100%;
  top: 50px;
  background-color: white;
  padding: 20px;
}

＆＃13;

<div class="outer">
  <div class="inner">

    <h5>Search</h5>

  </div>

</div>

＆＃13;

Answer 1

您在100％不透明白色上使用50％不透明白色。你究竟希望如何变得可见？

此外，您的body的计算高度为0。这使.outer有100％的0 - 猜猜是什么......

＆＃13;

html, body { height: 100%; }
body { background-color: #f0f0f0; }
.outer {
  position: relative;
  z-index: 1;
  background-color: rgba(200, 0, 0, 0.5);
  height: 100%;
}
.inner {
  position: absolute;
  width: 100%;
  top: 50px;
  
  padding: 20px;
}

＆＃13;

<div class="outer">
  <div class="inner">
    <h5>Search</h5>
  </div>
</div>

＆＃13;

Answer 2

使用vh（视口高度）而不是100％高度。当你使用100％的高度时，它需要100％的父级，而父级的身高是0px。

.outer {
  position: relative;
  z-index: 1;
  background-color: rgb(255, 255, 255, 0.5);
  height: 100vh;
}
.inner {
  position: absolute;
  width: 100%;
  top: 50px;
  background-color: white;
  padding: 20px;
}

<div class="outer">
  <div class="inner">

    <h5>Search</h5>

  </div>

</div>

Answer 3

如果孩子身上有一个坚实的背景，而.outer没有高度，那么父div不会达到不透明度，因此无法显示它。（因为position:absolute）

可能会扭转这些背景并给出相对位置会让你理解它的工作方式如下所示。

注意：两个地方的position:absolute;都有道理

＆＃13;

.outer {
  position: relative;
  background-color: red;
  z-index: 1;
  height: 100%;
}
.inner {
  position: relative;
  width: 100%;
  top: 50px;
  background-color: rgba(255, 255, 255, 0.5);
  padding: 20px;
}

＆＃13;

<div class="outer">
  <div class="inner">

    <h5>Search</h5>

  </div>

</div>

＆＃13;

CSS - 背景不透明度不起作用

3 个答案: