3

CSSを使用して要素の不透明度に取り組んでいます。段落はdivに配置されますが、divの不透明度を0.4に設定すると、段落も影響を受けます。これで不透明度1.0を割り当てて、段落のdivをオーバーライドしようとしましたが、うまくいきません。どうすればこれを解決できますか?

4

3 に答える 3

3

短い答えは、できないということです。それが不透明度の仕組みです。

より長い答えは、実際に何を達成しようとしているのかによって異なります (古い XY 問題)。

たとえば、段落ではなく div の背景を半透明にしたい場合は、div 全体を半透明にする代わりに、半透明の背景を使用することで解決できます。

于 2012-12-22T11:10:34.963 に答える
2

これを修正する唯一の方法は、背景をコンテンツから分離することです。

<div id="container" style="position: relative;">
    <div id="background" style="position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; opacity: 0.4; background: #ccc;">&nbsp;</div>
    <div id="content">Your content here</div>
</div>
于 2012-12-22T11:12:44.977 に答える
1

私は以前にこれを行いました。正しく覚えていればposition:absolute;、innerDivに設定しているので、opacityプロパティはうまく機能します。

この効果を実現する別の方法は、outerDivの背景を不透明度ではなくアルファで設定することです。例：変更

.outerDiv{
  background-color: white; //or #fff or rgb(255,255,255) 
  opacity: 0.4;
}

に

.outerDiv{
  background-color: rgba(225,225,225,0.4);
}

4番目の値は、不透明度のように機能するアルファです。divの内容を気にすることはありません。

于 2012-12-22T11:42:12.657 に答える