CSS のみを使用して、オーバーレイに穴を作成してその下のコンテンツを表示するにはどうすればよいですか?

CSS のマスク レイヤー ホール

Web サイト上にマスク レイヤーを作成し、その下にあるコンテンツの可視性を維持することは、一般的なニーズです。この記事では、純粋な CSS を使用してこの効果を実現する方法について説明します。

質問

ユーザーがマスク レイヤーを通して下にある Web サイトのコンテンツを見えるようにマスク レイヤーに穴を作成するにはどうすればよいですか?

CSS ソリューション

box-shadow プロパティを使用してマスク レイヤに穴を作成します。このプロパティを使用すると、要素の周囲に影を作成できます。非常に大きな影を広げると、本質的に透明な領域を作成できます。

box-shadow: 0 0 0 9999px rgba(0, 0, 255, 0.2);

上に示すように、拡張半径を非常に大きな値 (9999px) に設定します。これにより、マスク レイヤの中央の透明な領域を維持しながら、マスク レイヤのほぼ全体を覆うシャドウが作成されます。

コード例

#underground {
  background-color: #725;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

#overlay {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  overflow: hidden;
}

#overlay #center {
  width: 400px;
  height: 200px;
  background-color: #ABD;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -100px;
  margin-left: -200px;
  border-width: 100%;
  border-color: #FFF;
  border-style: solid;
  box-shadow: 0 0 0 9999px rgba(0, 0, 255, 0.2);
}

<div>

結論

box-shadow プロパティを使用して、マスク レイヤに穴を作成することに成功しました。この手法により、開発者は基礎となるコンテンツの可視性を維持しながらマスク レイヤーを作成できる柔軟性が得られ、CSS の可能性が広がります。

以上がCSS のみを使用して、オーバーレイに穴を作成してその下のコンテンツを表示するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。