HTML/CSS を使用して、子要素の可視性に影響を与えずにフェード背景を作成する方法

HTML/CSS を使用した子要素に影響を与えない不透明度の操作

問題:

背景のフェード効果を実装する不透明度だけを使用すると、子要素を表示し続けるのが困難になる場合があります。この問題は、下にあるコンテンツを薄暗くしてそれ自体を強調表示するポップアップ ボックスを作成しようとすると発生します。

解決策:

目的の効果を実現するには、不透明度と背景色を組み合わせます。次のように:

<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>

background プロパティを rgba 値で設定することで、#box 要素の可視性を維持しながら、ポップアップ ボックスの背後にあるコンテンツを表すコンテナの不透明度を指定します。 rgb 値は色を表し、a 値は透明度レベルを示します。

このアプローチを適用するには、提供されている CSS コードを実装し、次の HTML を含めます。

<code class="html"><div id="container">
    container text
    <div id="box">
        box text
    </div>
</div></code>

以上がHTML/CSS を使用して、子要素の可視性に影響を与えずにフェード背景を作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。