>  기사  >  웹 프론트엔드  >  CSS 마스크 코드(검증됨)

CSS 마스크 코드(검증됨)

WBOY
WBOY원래의
2016-09-15 11:15:171020검색
<span style="color: #000000;">#mask
{
    background-color: rgb(0, 0, 0);
    display:none;
    opacity: 0.0; /* Safari, Opera */
    -moz-opacity:0.0; /* FireFox */
    filter: alpha(opacity=0); /* IE */
    z-index: 100;
    height: 100%;
    width: 100%;
    background-repeat:repeat;
    position:fixed;
    top: 0px;
    left: 0px;
}</span>

위 스타일을 사용하면 반투명 마스크 레이어를 얻을 수 있음을 알 수 있습니다. 다음과 같이 몸체에 div 태그만 배치하면 됩니다.

<span style="color: #0000ff;">8a5835de17a870254e383a9db835d04d4d765cbf8ce485a2a526f75a4eba1cce</span>

마스킹이 필요한 경우 마스크만 보이도록 설정하면 됩니다.

<code class="javascript"><span class="pln">$<span class="pun">(<span class="str">"#mask"<span class="pun">).<span class="pln">show<span class="pun">();</span></span></span></span></span></span></code><br /><br />最后,我们将要显示的内容居中显示在我们的遮罩层之上就可以达到我们想要的效果了,位置通过z-index来控制。在遮罩层上的显示内容一般需要居中显示,如果你对css居中还不熟悉,请查水费。
성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.