Web ページのポップアップウィンドウにマスクを追加する-CSSチュートリアル-php.cn

この記事では、CSS を使用して Web ページのマスキング効果を実現する方法を紹介します。主に 2 つのボックスの表示レベルを制御し、背景色とマスクレイヤーの表示透明度を制御することによってマスキング効果を実現します。 CSSを勉強している友人の参考になれば幸いです。

Web ページのポップアップウィンドウにマスクを追加する

#ポップアップウィンドウにマスクを追加する

マスクレイヤー効果は多くの開発ニーズで頻繁に発生すると思います。状況によっては、マスクレイヤー効果を実現する方法は数多くあります。最も簡単な方法を以下に紹介します。CSS を使用してマスクを実現します

dom ノードコード:

ログイン後にコピー

CSS スタイルコード

.ui-progressbar{ position: absolute; top:40%; left:40%; z-index: 99999999; width:500px; height:22px; line-height:22px; display:none; } .ui-progressbar-value { background-image: url("../images/pbar-ani.gif"); border:0px; } .shade { background:rgba(0, 0, 0, 0.4); width:100%; height:100%; position: absolute; z-index:99; left:0px; top:0px; opacity:0.6; filter:alpha(opacity=60); display:none; }

ログイン後にコピー

主に 2 つのボックスの表示レベルを制御し、マスクレイヤーの背景色と表示透明度を制御することでマスキング効果を実現します。

以上がWeb ページのポップアップウィンドウにマスクを追加するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。