ホームページ >ウェブフロントエンド >CSSチュートリアル >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 サイトの他の関連記事を参照してください。