0

任何能弄清楚为什么这不起作用的人的奖励道具。出于某种原因，我的文本“即内容、菜单、页脚”继承了不透明度，而不是处于 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>
4

2 回答 2

5

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

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

于 2012-06-08T20:08:49.010 回答
1

CSS 不透明度有点不稳定——一旦你在一个元素上设置了特定的不透明度，该元素的所有子元素都被迫至少假设相同的不透明度。您无法使用子样式覆盖来解决此问题。

标准的解决方法是创建两个元素，并使用 z-index 将第二个元素绝对“置于”第一个元素之上。较低的元素获得您的部分透明度，较高的元素获得您的不透明样式。

<div style="position: relative">
   <div id="transparency" style="position: absolute; top: 0; left: 0">... transparent stuff here </div>
   <div id="regular_content" style="position: absolute; top:0;left:0;z-index:1">...</div>
</div>
于 2012-06-08T20:21:49.113 回答