JavaScript を使用せずに CSS オーバーレイにシースルーホールを作成する方法

CSS を使用してオーバーレイにシースルー ホールを作成する

オーバーレイを操作する場合、オーバーレイ内に透明なセクションを作成して、閲覧者は基礎となる Web ページを最後まで見ることができます。この効果は CSS だけで実現でき、JavaScript は必要ありません。

効果的な方法の 1 つは、非常に大きな拡散半径を持つ box-shadow プロパティを利用することです。そうすることで、基本的に、下にある要素に重なる拡張的な影を作成し、それらを効果的に隠します。

この手法を説明するには、次の CSS コードを考えてみましょう。

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

HTML 要素を使用すると、次の例に示すように、このコードはオーバーレイ内に透明な穴を生成します。

HTML:

<p>Lorem ipsum dolor sit amet, ocurreret tincidunt philosophia in sea, at pro postea ullamcorper. Mea ei aeque feugiat, cum ut utinam conceptam, in pro partem veritus molestiae. Omnis efficiantur an eum, te mel quot perpetua. Ad duo autem dolore, vocent lucilius te cum, ut duo quem singulis.</p>
<p>Has ex idque repudiandae, an mei munere philosophia. Sale molestie id eos, eam ne blandit adipisci. Ei eam ipsum dissentiunt. Ei vel accusam dolores efficiantur.</p>

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

結論として、box-shadow を大きなサイズで使用します。 Spread radius は、CSS オーバーレイ内に透明な穴を作成するシンプルかつ効果的な方法を提供し、動的で視覚的に魅力的な効果を可能にします。

以上がJavaScript を使用せずに CSS オーバーレイにシースルーホールを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。