css滤镜filter：alpha（透明度）

来源：互联网发布：mac视频播放器哪个好编辑：程序博客网时间：2024/05/17 08:46

<html>

<head>

<title>主要做背景图片效果</title>

<style>

.black_overlay{

display: none;

position: absolute;

top: 0%;

left: 0%;

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

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

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

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

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

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

/* Opacity：透明度级别，范围是0-100，0代表完全透明，100代表完全不透明。
FinishOpacity：设置渐变的透明效果时，用来指定结束时的透明度，范围也是0 到 100。
Style：设置渐变透明的样式，值为0代表统一形状、1代表线形、2代表放射状、3代表长方形。
StartX和StartY：代表渐变透明效果的开始X和Y坐标。
FinishX和FinishY：代表渐变透明效果结束X和Y 的坐标。 */

filter: alpha(opacity=60,finishopacity=50,style=2,startx=0,starty=85,finishx=150,finishy=85); /* 透明度，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