Home  >  Article  >  Web Front-end  >  css mask code (verified)

css mask code (verified)

WBOY
WBOYOriginal
2016-09-15 11:15:17974browse
<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>

It can be seen that the above style can achieve a semi-transparent mask layer. We only need to place a div tag in our body, as follows:

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

When we need to mask, we only need to make the mask visible:

<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居中还不熟悉,请查水费。
Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn