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

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

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

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

dom ノード コード:

<!-- 进度条遮罩 -->
<t:p id="shade" styleClass="shade" > </t:p>

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