您的位置：首页 > Web前端 > CSS

css滤镜filter：alpha（透明度）

2014-08-13 11:30 253 查看

<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
<a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">here</a>
</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>
<div id="fade" class="black_overlay"></div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： html

相关文章推荐

新的分享

章节导航