Question

我正在尝试将一些内容放入不透明度为0.6的内容栏中。我不希望内容（文本，视频等）与内容栏具有相同的不透明度。我尝试将它们放入两个不同的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>

Answer 1

不使用.bg类中的HEX颜色代码，而是使用RGBA颜色，例如background-color:rgba(0, 0, 0, 0.6)＆amp;删除opacity:0.6。因为不透明度元素下的每个孩子也都变得透明。

Answer 2

您无法使用不透明度执行此操作，因为所有子元素都将其父级的不透明度视为基线。你可以做的是使用背景：rgba（）;使父母的背景透明，同时不影响其子女。见http://jsbin.com/taxevufaqo/edit?html,css,output

Answer 3

是的我曾经有过几次这个问题，最好的解决办法就是快速入侵。

background-color:rgba(255,0,0,0.5);

在inspect元素中更改255，直到找到所需的颜色。希望有所帮助。

Answer 4

每个人都会建议使用＆＃34; RGBA＆＃34;颜色而不是＆＃34; HEX＆＃34;如果你使用的背景颜色可以正常工作。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

将文本放入内容栏？

4 个答案: