CSS オーバーレイに穴を作成するにはどうすればよいですか?

CSS オーバーレイに穴を作成する

オーバーレイに穴を残して、下のコンテンツが透けて見える効果を作成することができます。 .

CSS ボックス シャドウの使用

この効果を実現するには、大きな拡散半径を持つ CSS box-shadow プロパティを使用します。

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

これにより、要素の周囲に大きな半透明のシャドウが作成されます。

例

次の例では、ホール クラスを使用してオーバーレイ div に「ホール」が作成されます。

.hole {
  position: absolute;
  top: 20px;
  left: 20px;
  width: 200px;
  height: 150px;
  box-shadow: 0 0 0 9999px rgba(0, 0, 255, 0.2);
}

<p>Lorem ipsum dolor sit amet, ocurreret tincidunt philosophia in sea, at pro postea ullamcorper.</p>
<p>Has ex idque repudiandae, an mei munere philosophia. Sale molestie id eos, eam ne blandit adipisci.</p>

<div class="hole"></div>

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