HTML/CSSでコンテナの不透明度を設定するときに子要素の不透明度を維持する方法は?

HTML/CSS で子要素の不透明度を維持する

目標は、背景のコンテンツをフェード表示して強調表示した、ページの上部に表示されるポップアップ ボックスを作成することです。 。ただし、コンテナの不透明度を 0.3 に設定すると、両方の div が半透明になるという問題が発生しました。

解決策: 背景色と不透明度を利用する

目的の効果を実現するには、不透明度を使用してください。背景色と合わせて。次のコードを考えてみましょう。

<code class="css">#container {
    border: solid gold 1px;   
    width: 400px;
    height: 200px;
    background:rgba(56,255,255,0.1);
}

#box {
    border: solid silver 1px;
    margin: 10px;
    width: 300px;
    height: 100px;
    background:rgba(205,206,255,0.1);
}
</code>

このコードでは、少し異なるアプローチが採用されています。

• #container 要素は、金色の枠線と半透明になるように設定されています。指定された不透明度の背景。
• ポップアップ ボックスを表す #box 要素には、銀色の境界線と、指定された異なる不透明度の半透明の背景が与えられます。

By背景色と不透明度を使用すると、子要素の不透明度を維持しながらコンテナの透明度を制御できます。これにより、ポップアップ ボックスが色あせた背景に対して目立つようになります。

以上がHTML/CSSでコンテナの不透明度を設定するときに子要素の不透明度を維持する方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。