Question

任何可以弄明白为什么这不起作用的奖励道具。出于某种原因，我的文字“即内容，菜单，页脚”继承了不透明度，并没有坐在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％，我不完全确定，但我不会＆＃39 ;认为可以使子元素比其父元素更透明。

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

Answer 2

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>

CSS透明度使文本透明

2 个答案: