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

2023-04-30 17:28:03html-css028

如何用css实现半透明遮罩层效果,第1张

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

.opacity{

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

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

html,body{ height:100%}

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

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

来解决这个问题

完整的代码:

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

.mask{height:100%

width:100%position:fixed_position:absolutetop:0z-index:1000}

.opacity{ opacity:0.3filter: 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>

class="ph">place holder height:1000px</p>

<div class="mask

opacity"></div>

<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>

<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>

具体解决方案如下：

一、IE和FF下document.body对象的clientHeight，offsetHeight，scrollHeight属性的差别。

clientHeight

在IE和FF下，该属性没什么差别，都是指浏览器的可视区域，即除去浏览器的那些工具栏状态栏剩下的页面展示空间的高度。

offsetHeight

在IE下，offsetHeight也是浏览器可视区域的高（包括边线）

在FF下，offsetHeight是页面具体内容的高度

scrollHeight

在IE下，scrollHeight 是页面具体内容的高度，可以小于clientHeight

在FF下，scrollHeight 是网页内容高度，不过最小值是clientHeight

二、下面是跨浏览器取得当前页面的高度的解决方法。

复制代码代码如下:

function getPageSize()

{

var body = document.documentElement；

var bodyOffsetWidth = 0

var bodyOffsetHeight = 0

var bodyScrollWidth = 0

var bodyScrollHeight = 0

var pageDimensions = [0,0]

pageDimensions[0]=body.clientHeight

pageDimensions[1]=body.clientWidth

bodyOffsetWidth=body.offsetWidth

bodyOffsetHeight=body.offsetHeight

bodyScrollWidth=body.scrollWidth

bodyScrollHeight=body.scrollHeight

if(bodyOffsetHeight >pageDimensions[0])

{

pageDimensions[0]=bodyOffsetHeight

}

if(bodyOffsetWidth >pageDimensions[1])

{

pageDimensions[1]=bodyOffsetWidth

}

if(bodyScrollHeight >pageDimensions[0])

{

pageDimensions[0]=bodyScrollHeight

}

if(bodyScrollWidth >pageDimensions[1])

{

pageDimensions[1]=bodyScrollWidth

}

return pageDimensions

}

三、页面上必须放置一个div，作为遮罩层，下面是这个遮罩层的css样式。

复制代码代码如下:

.lockDiv

{

position:absolute

left:0

top:0

height:0

width:0

border:2 solid red

display:none

text-align:center

background-color:#DBDBDB

filter:Alpha(opacity=60)

}

四、在客户端使用下面的javascript用遮罩层将整个页面封闭。

复制代码代码如下:

var sandglassSpan = 1

var timeHdl

function DisablePage()

{

var ctrlSandglass = document.getElementById("divSandglass")

if(sandglassSpan==0)

{

window.clearTimeout(timeHdl)

ctrlSandglass.style.display = "none"

document.body.style.cursor = 'auto'

sandglassSpan = 1

}

else

{

document.body.style.cursor = 'wait'

var pageDimensions = getPageSize()

ctrlSandglass.style.top = 0

ctrlSandglass.style.left = 0

ctrlSandglass.style.height = pageDimensions[0]

ctrlSandglass.style.width = pageDimensions[1]

ctrlSandglass.style.display = "block"

timeHdl = window.setTimeout(DisablePage,200)

}

五、如果页面上使用了ASP.net的Validator控件，那么应该使用如下的javascript。

复制代码代码如下:

var sandglassSpan = 1

var timeHdl

function DisablePageHaveValidator()

{

var ctrlSandglass = document.getElementById("divSandglass")

if(false == Page_IsValid)

{

sandglassSpan = 0

}

if(sandglassSpan==0)

{

window.clearTimeout(timeHdl)

ctrlSandglass.style.display = "none"

document.body.style.cursor = 'auto'

sandglassSpan = 1

}

else

{

document.body.style.cursor = 'wait'

ctrlSandglass.style.display = "block"

var pageDimensions = getPageSize()

ctrlSandglass.style.top = 0

ctrlSandglass.style.left = 0

ctrlSandglass.style.height = pageDimensions[0]

ctrlSandglass.style.width = pageDimensions[1]

timeHdl = window.setTimeout(DisablePageHaveValidator, 200)

}

HTML：

<p class="cue">亲，活动还在继续，5月6日-5月8日抽奖，要累计50万以上才可参加哦~</p>

</p>

</div>

CSS：

.shade{

width: 100%

background-color: rgba(0,0,0,0.3)

position: fixed

left: 0

top: 0

display: none

}

.tanceng{

background-color: #ffeb8d

width: 240px

padding: 20px

line-height: 200%

color: #f31b33

position: fixed

top: 20%

left: 50%

border-radius: 0.6rem

margin-left: -140px

display: none

}

.okbtn a{

display: block

width: 80%

background-color: #f31b33

color: #fff

line-height: 250%

font-size: 16px

text-align: center

border-radius: 5px

margin:0 auto

}

JS:

var webH = $(window).height()

//这里显示遮罩

$("#inner").click(function(e){ //#inner就是你要点击出现遮罩的按钮

$(".shade,.tanceng").css("display","block")

$(".shade").height(webH)

$(".cue").html("亲，活动还在继续，5月6日-5月8日抽奖，要累计购买50万以上才可参加哦~")

//这个可以不要，这是我自己的东西

})

//这里隐藏遮罩

$(".okbtn").click(function(e){

$(".shade,.tanceng").css("display","none")

$(".shade").height(0)

})

词库加载错误未能找到文件“E高铁采集器内存溢出ConfigurationDictStopwordstxt”

# 上一篇：电脑显示器怎么装

# 下一篇：CSS3新特性

推荐阅读

热门文章

最新发布

标签列表

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

给您推荐相同类型的内容：