ホームページ >ウェブフロントエンド >CSSチュートリアル >CSS オーバーレイに穴を作成するにはどうすればよいですか?

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

DDD
DDDオリジナル
2024-11-08 04:02:01948ブラウズ

How to Create Holes in CSS Overlays?

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 サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。