8

opacity親から子への継承を削除することは可能divですか?

例

<style type="text/css">
.parent {
 opacity:.5;
}
.parent div {
 opacity:1; /* I want this to override the ".5", but instead it combines */
}
</style>
<div class="parent"><div></div></div>
4

5 に答える 5

17

fmsfが言うように、それは不可能です。背景色または色を透明にする方法を探している場合は、rgbaを試すことができます。これはIE6ではサポートされていません。

#my_element {
  /* ie6 fallback - no opacity */
  background-color:rgb(255, 255, 255);

  /* rgba(red, green, blue, alpha); */
  background-color:rgba(255,255,255,0.5);
}
于 2010-04-14T11:34:09.890 に答える
3

いいえ、厳密にはあなたが質問しているという意味ではありません。何が起こっているのかというと、値が従来の意味で継承されているわけではありませんが、子コントロールは、部分的に透過的なコンテナ内にあることの直接的な効果として、部分的に透過的です。

多くの状況で、それを回避することができます。

したがって、これは機能しません。

<div id="parent" style="opacity: 0.5; background-color: red;">
    <div id="child" style="opacity: 1"> Still just 50% visible </div>
</div>

しかし、あなたはこのようなことをすることができます：

<div id="wrapper" style="position: relative;">
    <div id="parent" style="position: absolute; top: 0; left: 0; opacity: 0.5; background-color: red; width: 100%;"> &nbsp; </div>
    <div id="child" style="position: absolute; top: 0; left: 0;"> This will be 100% visible </div>
</div>

いくつかの注意点がありますが、これがあなたが望むことを達成するための唯一の良い方法です。

この例では、1行のテキストを扱っており、「親」には&nbsp;、高さも1行を占めるを含めています。あなたの「子供」がより高い高さである場合、それは実際にはまったく親ではないので、「親」は成長しません。高さは手動で設定する必要があります。

また、絶対位置の要素を処理するため、幅を手動で指定する必要があります。

絶対測位は設計上の問題を解決するためのひどい方法だと人々が言う前に、それが完全に合法だと思う場合があります。position: relative上記の例のように扱う場合、そして絶対にウィンドウ全体ではなく、それに基づいて要素を配置します。

于 2010-04-14T11:37:46.373 に答える
3

いいえ、できません

不透明度は、父親の div から完全に継承されます。

意味：

#father{
 opacity: 0.5;
}

#child{
 opacity: 0.9; /* actualy means opacity 0.5*0.9 == 0.45 of opacity value */
}

編集：

カンニングしたいけど、透明なオヤジの「ワークフロー」はそのまま。親 div の (サイズと位置の) コピーを親の上に置くことができます。

#father, #copy{
your css here
opacity: 0.5;
}

#copy{
   opacity: 1;
   background: transparent;
   z-index: 1000; /* or one more than the father */
}

非透過 HTML を父親に配置する代わりに、コピーに配置します。

于 2010-04-14T11:27:18.797 に答える
2

透明なPNGを作成し、backgroundを使用する代わりに親クラスのとして適用しますopacity。

デモについては、Twitterのレイアウト（具体的にはメインコンテンツの背景/境界線）を参照してください。

于 2012-05-07T00:40:12.860 に答える
0

親子の不透明度の継承を回避できますが、ハッキーになります: http://www.impressivewebs.com/css-opacity-that-doesnt-affect-child-elements/

thatsNotYoChild.jsという名前のジョブを実行するためのプラグインもあります。

HTML5 では、 RGBAを使用して、透明度 (アルファ) が継承されない背景色を設定することもできます。

例：

/* Black with 75% transparency */
background-color: rgba(0, 0, 0, 0.25);
于 2014-02-28T13:33:52.320 に答える