CSS を使用して穴のあるオーバーレイを作成するにはどうすればよいですか?

CSS を使用してオーバーレイに穴を作成する

質問:

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

回答:

CSS のみを使用してオーバーレイにホールを作成することは確かに可能です。これを実現する方法は次のとおりです:

CSS Box-Shadow の使用:

1. .hole などの新しい CSS クラスを定義します。
2. このクラスの box-shadow プロパティを大きな拡散半径で設定します。スプレッド半径は、作成する「穴」のサイズを定義します。
3. .hole 要素の適切な位置と寸法を設定して、穴を表示する場所を決定します。

たとえば、次の CSS コードはオーバーレイに穴を作成します:

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

このコードでは、穴はオーバーレイの上端と左端から 20 ピクセルの位置にあり、幅は 200 ピクセルです。高さは 150 ピクセルです。 box-shadow プロパティは、9999 ピクセルの拡散半径で大きなシャドウを作成し、オーバーレイを効果的にマスクして、その下にあるコンテンツを表示します。

コード例:

<p>Overlay content...</p>

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

<p>Underlying content...</p>

このコードは、オーバーレイ コンテンツを表示し、.hole 要素で定義された「ホール」を通して基礎となるコンテンツを表示できるようにします。

注:

このアプローチにより、次のことが可能になります。シンプルな透明領域からより複雑で視覚的に魅力的なデザインに至るまで、さまざまな穴エフェクトを作成して、ユーザー エクスペリエンスを向上させ、Web アプリケーションに芸術性を加えます。

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