html - 将文字放入内容栏？

我正在尝试将一些内容放入不透明度为0.6的内容栏中。
我不希望内容（文本，视频等）具有与contentbar相同的不透明度。我尝试将它们放入两个不同的div标签中，其中一个放在另一个标签中，但是当我这样做时，文本将不会位于内容栏的顶部。

希望我解释得足够好。

.content {
  color: #ffffff;
  position: relative;
  z-index:1;
}

.bg {
  width: 80%
    opacity: .6;
  background-color: #000000;
  margin-left: 10%;
  margin-right: 10%;
  border-radius: 3px;
  overflow: hidden;
}

<div class="content">
  <p>Hello World!</p>
  <div class="bg">
    <h1>Hello world!</h1>
  </div>
</div>

最佳答案

每个人都会建议使用“ RGBA”颜色而不是“十六进制”，如果您使用的背景颜色效果很好。

#content {
  background: rgba(0,0,0,0.5);
}

<div id='content'><p>Hello World</p></div>

如果您使用的是图像或其他颜色，则必须继续使用两个div的方法，一个在另一个下。问题在于内容必须具有固定的高度才能正确对齐所有内容。

#content,
#bg,
#content p {
  display: block;
  width: 200px;
  height: 30px;
}
#content {
  position: relative;
  z-index: 0;
}
#bg,
#content p {
  position: absolute;
  top: 0;
  left: 0;
}
#bg {
  background: #36f; /* Can be an image */
  opacity: 0.5;
  z-index: 1;
}
#content p {
  line-height: 30px;
  text-align: center;
  color: black;
  z-index: 2;
  margin: 0;
}

<div id='content'>
  <div id='bg'></div>
  <p>Hello World</p>
</div>