HTML/CSS で背景が透明なオーバーレイを作成するにはどうすればよいですか?

HTML/CSS で透明な背景を持つオーバーレイを作成する

背景の上にポップアップ ボックスが表示されるオーバーレイ効果を作成することを目的としています。中身が見えにくくなります。ただし、コンテナに不透明度を適用すると、ポップアップ ボックスにも影響します。

解決策

希望の効果を実現するには、背景色と組み合わせて不透明度を利用します。コンテナの CSS 内:

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

• background-color はコンテナの透明色を設定します。
• rgba() の形式は rgba(r, g, b, a)、r、g、b は赤、緑、青の値で、a は不透明度 (0 は完全に透明) です。

次に、ポップアップ ボックスについて:

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

このアプローチにより、ポップアップ ボックスの可視性を維持しながら背景を暗くし、目的のオーバーレイ効果を作成できます。

以上がHTML/CSS で背景が透明なオーバーレイを作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。