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 の背景を透明にしたいだけの場合は、不透明度をまったく使用する必要はありませんbackground: rgba(255, 255, 255, 0.5);。前景のテキストの色をそのままにして、半透明の白を使用できます。古いバージョンの IE でも同様に回避策がありますが、ie9 では問題なく動作するはずです。

于 2012-06-08T20:08:49.010 に答える
1

CSS の不透明度は少し不安定です。要素に特定の不透明度を設定すると、その要素のすべての子は、少なくとも同じ不透明度を想定するように強制されます。子スタイルのオーバーライドでこれを回避することはできません。

標準的な回避策は、2 つの要素を作成し、2 番目の要素を最初の要素の上に 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 に答える