子要素に影響を与えずにコンテナ内で選択的な不透明度を実現するにはどうすればよいですか?

HTML/CSS で選択的な不透明度を実現する

Web ページ上に視覚要素を作成する場合、不透明度の制御は非常に重要です。ただし、子要素に影響を与えずに不透明度を実現するのは難しい場合があります。この質問では、コンテンツの可視性を損なうことなく、コンテナに不透明度を適用する手法を検討します。

望ましい効果は、Web ページのコンテンツ上にポップアップ ボックスが配置され、不透明度を下げることで背景のコンテンツが部分的に表示されることです。質問者はコンテナで不透明度を使用しようとしましたが、不透明度が子要素にも影響し、両方の不透明度が低下しました。

この問題を解決するには、不透明度と背景色の組み合わせを使用できます。不透明度コンポーネント (rgba(56,255,255,0.1) など) を使用してコンテナの背景色を rgba 値に設定すると、子要素の可視性を維持しながら不透明度を下げることができます。これにより、背景が部分的に不透明なポップアップ ボックスの意図した効果を作成できます。

<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);
}

<div id="container">
    containter text
    <div id="box">
        box text
    </div>
</div>
</code>

以上が子要素に影響を与えずにコンテナ内で選択的な不透明度を実現するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。