Heim >Web-Frontend >CSS-Tutorial >Fügen Sie Ihrem Webseiten-Popup-Fenster eine Maske hinzu

Fügen Sie Ihrem Webseiten-Popup-Fenster eine Maske hinzu

angryTom
angryTomnach vorne
2020-03-03 17:57:274067Durchsuche

Dieser Artikel führt Sie in die Verwendung von CSS zum Erzielen von Webseiten-Maskierungseffekten ein. Der Maskierungseffekt wird hauptsächlich durch Steuern der Anzeigeebene der beiden Felder, Steuern der Hintergrundfarbe und Anzeigetransparenz der Maskenebene erzielt. Ich hoffe, dass es Freunden, die CSS lernen, hilfreich sein wird.

Fügen Sie Ihrem Webseiten-Popup-Fenster eine Maske hinzu

Fügen Sie eine Maske zu Ihrem Popup-Fenster hinzu

Ich glaube, dass der Maskenebeneneffekt bei vielen Entwicklungsanforderungen häufig auftritt In einer Situation gibt es viele Möglichkeiten, den Maskenebeneneffekt zu erzielen. Die einfachste wird unten vorgestellt: Verwendung von CSS zum Implementieren des Masken-

Dom-Knotencodes:

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

CSS-Stilcode

.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; 
            }

Erzielt den Maskierungseffekt hauptsächlich durch Steuerung der Anzeigeebenen der beiden Boxen, Steuerung der Hintergrundfarbe und Anzeigetransparenz der Maskenebene.

Das obige ist der detaillierte Inhalt vonFügen Sie Ihrem Webseiten-Popup-Fenster eine Maske hinzu. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Dieser Artikel ist reproduziert unter:cnblogs.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen