웹 페이지 팝업 창에 마스크 추가-CSS 튜토리얼-php.cn

웹 페이지 팝업 창에 마스크 추가

angryTom

풀어 주다： 2020-03-03 17:57:27

앞으로

3937명이 탐색했습니다.

이 글에서는 CSS를 사용하여 웹 페이지 마스킹 효과를 얻는 방법을 소개합니다. 주로 두 상자의 표시 수준을 제어하고 마스크 레이어의 배경색과 표시 투명도를 제어하여 마스킹 효과를 얻습니다. 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; 
            }

로그인 후 복사

주로 두 상자의 표시 수준을 제어하고 배경색과 마스크 레이어의 표시 투명도를 제어하여 마스킹을 구현합니다. 커버 효과.

위 내용은 웹 페이지 팝업 창에 마스크 추가의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!