遮罩效果

来源：互联网发布：mac视频播放器哪个好编辑：程序博客网时间：2024/04/29 21:37

<html>

<head>

<title>纯CSS Lightbox效果</title>

<style>

.black_overlay{

display: none;

position: absolute;

top: 0%;

left: 0%;

width: 100%; /* 被遮罩宽度 */

height: 100%; /* 被遮罩高度 */

background-color:#EEEEEE; /* 被遮罩时背景颜色，这里是灰色 */

z-index:1001; /* 被遮罩，数值要比弹窗口的值小 */

-moz-opacity: 0.6; /* 透明度，0是完全透明 */

opacity:.60; /* 透明度，0是完全透明 */

filter: alpha(opacity=60); /* 透明度，0是完全透明 */

}

.white_content {

display: none;

position: absolute;

top: 25%;

left: 25%;

width: 50%;

height: 50%;

padding: 16px;

border: 16px solid orange;

background-color: white;

z-index:1002;

overflow: auto;

}

</style>

</head>

<body>

<p>To display a lightbox click

</p>

<div id="light" class="white_content">This is the lightbox content.

<a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">Close</a>

</div>

</body>

</html>

0 0