如何用css实现半透明遮罩层效果

 我来答
一动出行
2015-02-07 · TA获得超过7760个赞
知道小有建树答主
回答量:1206
采纳率:80%
帮助的人:508万
展开全部

1 、半透明效果可以使用 css3 中的 opacity 属性,在低版本的IE浏览器中使用IE的alpha 滤镜。代码:

.opacity{
opacity:0.3; filter: alpha(opacity=30); background-color:#000; }

2
、要覆盖整个可视区域通常的做法是:

html,body{ height:100%}

.mask{height:100%;width:100%;}


但是这样做当内容超过一屏时只有IE6下显示的效果是我们所期望的,在其他浏览器中首屏以下的没能被遮盖住,为了兼容其他浏览器我们可以使用position:fixed;
来解决这个问题

完整的代码:

<div class="mask opacity"></div>


html,body{ height:100%; margin:0; padding:0}

.mask{height:100%;
width:100%; position:fixed; _position:absolute; top:0; z-index:1000; }


.opacity{ opacity:0.3; filter: alpha(opacity=30); background-color:#000;


给你一个例子:

<!DOCTYPE html> 
<html> 
<head> 
<meta 
charset="gb2312" /> 
<title>背景半透明覆盖整个可视区域</title> 

<style> 
html,body{ height:100%; margin:0; padding:0; 
font-size:14px;} 
p{ line-height:18px;} 
.mask{height:100%; width:100%; 
position:fixed; _position:absolute; top:0; z-index:1000; } 
.opacity{ 
opacity:0.3; filter: alpha(opacity=30); background-color:#000; } 

.content{height:600px; width:800px; overflow:auto; border:2px solid #ccc; 
background-color:#fff; position:absolute; top:50%; left:50%; margin:-300px auto 
auto -400px; z-index:1001; word-wrap: break-word; padding:3px;} 
.ph{ 
height:1000px;} 
</style> 
</head> 
<body> 
<p 
class="ph">place holder height:1000px;</p> 
<div class="mask 
opacity"></div> 
<div class="content"> 

<h1>背景半透明覆盖整个可视区域</h1> 
<p> 
这个效果效果在工作中经常会遇到,这篇文章主要介绍了当内容超过一屏时如何做到多浏览器的兼容性。 下面我们通过一个简单的例子看看如何实现,高手请绕道。 
</p> 
<p>html代码很简单 < d i v class="mask opacity">< / d i 
v > </p> 
<p> 1 、半透明效果可以使用 css3 中的 opacity 
属性,在低版本的IE浏览器中使用IE的alpha 滤镜。代码: 

<code>.opacity{ opacity:0.3; 
filter: alpha(opacity=30); background-color:#000; }</code> </p> 

<p> 2 、要覆盖整个可视区域通常的做法是: <br/> 
<code> html,body{ 
height:100%} </code> <br/> 

<code>.mask{height:100%;width:100%;}</code> <br/> 

但是这样做当内容超过一屏时只有IE6下显示的效果是我们所期望的,在其他浏览器中首屏以下的没能被遮盖住,为了兼容其他浏览器我们可以使用<code>position:fixed; 
</code>来解决这个问题 </p> 
<p> 
<strong>完整的代码</strong>: 
<pre> 
html,body{ height:100%; 
margin:0; padding:0} 
.mask{height:100%; width:100%; position:fixed; 
_position:absolute; top:0; z-index:1000; } 
.opacity{ opacity:0.3; filter: 
alpha(opacity=30); background-color:#000; } 
</pre> 
</p> 

<p> <strong>参考资料:</strong>

<a href="http://zhidao.baidu.com">背景半透明最佳实践</a>

<a href="http://baidu.com">垂直居中的几种实现方法</a>

<a href="http://tieba.baidu.com">DIV高度100%</a>

</p> 
</div> 
</body> 

</html>
peimingxu
2015-11-02
知道答主
回答量:6
采纳率:0%
帮助的人:4.9万
展开全部
http://www.htmleaf.com/ziliaoku/qianduanjiaocheng/201504221722.html

这个应该是最靠谱的了吧,不过应用的时候调用比较麻烦。
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
收起 1条折叠回答
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式