css遮罩代码（已验证）-html tutorial-php.cn

css遮罩代码（已验证）

WBOY

Lepaskan： 2016-09-15 11:15:17

asal

1055 orang telah melayarinya

<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>

Salin selepas log masuk

可见上边的样式可实现半透明的遮罩层，我们只需将一个div标签放置在我们的body中，如下：

<span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="mask"</span><span style="color: #ff0000;"> class</span><span style="color: #0000ff;">="mask"</span><span style="color: #0000ff;">></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span></span>

Salin selepas log masuk

在需要遮罩的时候，我们只需将mask变成可见的即可：

<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居中还不熟悉，请查水费。

Salin selepas log masuk