`
DAQIQIU
  • 浏览: 23275 次
  • 性别: Icon_minigender_1
社区版块
存档分类
最新评论

背景遮罩层铺满屏

 
阅读更多
//背景
#bg{ display: none;  position: absolute;  top: 0%;  left: 0%;  width: 100px;  height: 100px;  background-color: black;  z-index:1001;  -moz-opacity: 0.7;  opacity:.70;  filter: alpha(opacity=70);}
var mask = document.getElementById("bg");
var b = document.documentElement?document.documentElement:document.body;
mask.style.width = b.clientWidth+"px";
mask.style.height = b.scrollHeight+"px";
$("."+clazz).css({
left:($("body").width()-$("."+clazz).width())/2-20+"px",
top:($(window).height()-$("."+clazz).height())/2+$(window).scrollTop()+"px",
display:"block"
});
分享到:
评论

相关推荐

    遮罩层 javascript

    同时,使用绝对定位或者fixed定位使其铺满整个屏幕。 ```css #maskLayer { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); display: none; /* 初始...

    js点击按钮实现带遮罩层的弹出视频效果

    - 设置遮罩层的bottom、left、right、top值为0,使其能够铺满整个屏幕。 - 初始状态将显示视频和遮罩层的div设置为不显示(display:none),以避免页面加载时直接展示出来,影响用户体验。 - z-index的设置确保视频...

    jQuery仿瑞丽全屏透明遮罩图片轮播滚动代码

    通过设置CSS样式,可以将图片铺满整个浏览器窗口,无论窗口大小如何变化都能保持合适的比例。 3. **透明遮罩**:透明遮罩是指在图片上覆盖一层半透明的层,通常用于添加额外的元素,如文字介绍或按钮,同时不影响...

    jquery仿魔客吧遮罩展示特效.zip

    在CSS中,我们将为遮罩层设置全局样式,如全屏铺满、固定定位、黑色背景和一定的透明度。例如: ```css .mask { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0...

    flash遮罩动画实例.docx编程资料

    - 使用**对齐面板**中的“相对于舞台”、“匹配高和宽”、“垂直中齐”和“水平中齐”按钮,确保矩形铺满整个舞台。 ##### 2. 绘制月亮 - **步骤**:绘制带有光晕效果的月亮。 - 使用**椭圆工具**,按住Shift键...

    js与css实现弹出层覆盖整个页面的方法

    在弹出层中,我们通常使用半透明黑色,以创建一个遮罩效果,让用户专注于弹出层内容。 4. `opacity`: 控制元素的透明度。这里我们设置为0.5,使背景变为半透明。 5. `z-index`: 这个属性决定了元素的堆叠顺序。...

    JS关闭窗口时产生的事件及用法示例

    通过CSS样式,包括透明度、位置和大小,使得遮罩层能够铺满整个页面。此外,评论窗口的`KF_PJ_DIV`元素的样式也被调整,以适应窗口的大小和位置,确保它在屏幕中心出现。 `mydiv_resize`函数可能是用来调整评论窗口...

    原生JS可拖动弹窗效果实例代码

    此外,还有`input.submit`用于定义提交按钮的样式,`#bgDiv`用于设置背景遮罩层的样式,使其半透明并铺满整个屏幕。 JavaScript部分是实现弹窗动态行为的关键。虽然这段代码没有包含具体的JavaScript实现,但从HTML...

    CSS3小结

    背景图片可以使用背景裁剪(background-clip)和背景定位(background-position)控制显示区域,同时支持多层背景(background-image)和背景铺满(background-size)。 4. **过渡与动画** CSS3的过渡(transition...

Global site tag (gtag.js) - Google Analytics