html - rgba 不让背景色透明

Question

问题是 rgba 透明度。我应该改变它的背景并使其透明。但是，它只是改变了背景颜色，并没有使其透明。

我经常遇到这个问题，有时有效，有时无效。

我试图弄清楚为什么有时它不起作用，即使我的编码方式与其他时候完全一样。

我还看到了一些建议，比如 rgba 和 () 之间的间距、alpha 的范围等等。但它们都不是很有帮助。

然后我看到了下面的建议。 (不记得出处了)“rgba 不影响子元素”。我几乎不记得了，所以我可能是错的，因为英语不是我的第一语言，所以我听不懂。

我有以下问题

1.> 如果陈述正确，请解释一下是什么意思？

2.> 附上的代码就是这个问题的例子。背景已更改但不透明。所以，请让我知道问题是否出在 child 和 parent 元素上。

3.> 让我知道您在阅读下面我的代码时注意到的任何事情。

* {
  margin: 0;
  padding: 0;
}

#top {
  background: url("./img/vbs/vbs4.png") no-repeat center center fixed;
  background-size: cover;
  width: 100vw;
  height: 100vh;
}

.outer {
  background: rgba(100, 100, 50, .5);
  width: 100vw;
  height: 100vh;
  display: flex;
}

.inner {
  background: white;
  width: 80vw;
  height: 70vh;
  margin: auto;
  display: flex;
  border-radius: 20%;
}

.inner>h1 {
  margin: auto;
  font-size: 3rem;
}

<div id="top"></div>

<div class="outer">
  <div class="inner">
    <h1>This is the title</h1>
  </div>
</div>

<div class="outer">
  <div class="inner">
    <h1>This is the title</h1>
  </div>
</div>

Answer 1

在上面的示例代码中，元素 .outer 是唯一具有 rgba() 样式的元素，因此元素只有 alpha/opacity/透明度应用于它。 .outer 是 .inner 的父元素，您已将未应用透明度的子元素与应用了透明样式的元素放在一起。你还提到有人说间距可能是问题，但不是，即使你在它之间放了一个长的 2 个空格或没有空格，它也不会影响 css 代码。您提到的短语“rgba 不影响子元素”是正确的，就像我说的唯一具有 rgba 的元素是 .outer。这就像在玻璃上画画，然后你把一个物体放到玻璃上，但物体不是玻璃。所以玻璃只有透明的行为/特性。

这是您附加的修复代码，只是向 .inner 元素添加了一个 opacity

* {
  margin: 0;
  padding: 0;
}

#top {
  background: url("./img/vbs/vbs4.png") no-repeat center center fixed;
  background-size: cover;
  width: 100vw;
  height: 100vh;
}

.outer {
  background: rgba(100, 100, 50, .5);
  width: 100vw;
  height: 100vh;
  display: flex;
}

.inner {
  background: white;
  width: 80vw;
  height: 70vh;
  margin: auto;
  display: flex;
  border-radius: 20%;
  /* opacity applied to the child outer (inner) */
  opacity: 0.5;
}

.inner>h1 {
  margin: auto;
  font-size: 3rem;
}

<div id="top"></div>

<div class="outer">
  <div class="inner">
    <h1>This is the title</h1>
  </div>
</div>

<div class="outer">
  <div class="inner">
    <h1>This is the title</h1>
  </div>
</div>