CSS のみを使用して、オーバーレイに穴を作成してその下のコンテンツを表示するにはどうすればよいですか?-CSSチュートリアル-php.cn

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

Patricia Arquette

リリース： 2024-11-11 00:05:03

オリジナル

748 人が閲覧しました

How can I create a hole in an overlay to reveal the content beneath it using only 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);
}

ログイン後にコピー