html - CSS透明度使文本透明

Question

奖励 Prop 给任何能弄清楚为什么这不起作用的人。出于某种原因，我的文本“即内容、菜单、页脚”继承了不透明度，而不是处于 1 不透明度并且完全可见。

我已经将它设置为类和 ID，因为我已经尝试了这两种方式，而且实际上我是 CSS 的新手

<style type="text/css">
div#page {
  border:0px solid purple;
  width:700px;
  margin:0 auto;
  padding:5px;
  text-align:left;
  background-image:url('images/layout.jpg');
}
div {
  text-align:center;
}
div#header {
  border:2px solid red;
  width:695px;
  height:30px;
}
div#mostpop {
  border:2px solid black;
  width:195px;
  float:Right;
  margin:10px 0px 10px 5px;
  height:245px;
  background-color:#ffffff;
  opacity:0.7;
  filter:alpha(opacity=60); /* For IE8 and earlier */
}
div#recent {
  border:2px solid black;
  width:195px;
  float:Right;
  margin:10px 0px 10px 0px;
  height:245px;
  position: relative;
  left: 204px;
  top: 255px;
  background-color:#ffffff;
  opacity:0.7;
  filter:alpha(opacity=60); /* For IE8 and earlier */
}
div#content {
  border:2px solid black;
  width:495px;
  margin:10px 0 10px 0px;
  min-height:500px;
  background-color:#ffffff;
  opacity:0.7;
  filter:alpha(opacity=60); /* For IE8 and earlier */
}
div#footer {
  border:2px solid black;
  width:695px;
  height:30px;
  background-color:#ffffff;
  opacity:0.7;
  filter:alpha(opacity=60); /* For IE8 and earlier */
div.recent p
  {
  margin:30px 40px;
  font-weight:bold;
  color:#000000;
  opacity:1;
}
div.content p
  {
  margin:30px 40px;
  font-weight:bold;
  color:#000000;
  opacity:1;
}
div.mostpop p
  {
  margin:30px 40px;
  font-weight:bold;
  color:#000000;
  opacity:1;
}
div.footer p
  {
  margin:30px 40px;
  font-weight:bold;
  color:#000000;
  opacity:1;
}
div.header p
  {
  margin:30px 40px;
  font-weight:bold;
  color:#000000;
  opacity:1;
}
</style>
<div id="page">
 <!--<div id="header">Header</div>-->
 <div class="mostpop" id="mostpop"><p>Menu</p></div>
 <div class="recent" id="recent"><p>Menu</p></div>
 <div class="content" id="content"><p>Content</p></div>

Answer 1

不透明度应始终从其父级继承。如果你有一个不透明度为 50% 的 div，然后你将 div 中的一些内容也设置为 50%，那么生成的内部 div 总体上将是 25%，我不完全确定，但我认为这不是可以使子元素的透明度低于其父元素。

如果你只是想让div有一个透明的背景，那么你根本不需要使用opacity，你可以使用background: rgba(255, 255, 255, 0.5);对于半透明的白色，同时保持前景文本颜色不变。对于旧版本的 IE 也有解决方法，但它应该适用于 ie9。