跨浏览器的遮罩层透明度

跨浏览器的遮罩层透明度

css 样式:

Css代码  

  1. background-color: rgba(255, 255, 255, 0.5);  
  2.     filter: alpha(opacity =   30);  
  3. -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";  

 遮罩div的全部样式:

Css代码  

  1. #loadPanel {  
  2.     overflow-y: auto;  
  3.     overflow-x: auto;  
  4.     width: 100%;  
  5.     top: 97px;  
  6.     left: 0px;  
  7.     position: absolute;  
  8.     background-color: rgba(255, 255, 255, 0.5);  
  9.     filter: alpha(opacity =   30);  
  10.     /*opacity: .3;*/  
  11.     -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";  
  12.     z-index: 99999;  
  13.     /*background-image: url("../images/loading.gif");*/  
  14.     background-repeat: no-repeat;  
  15.     background-position-x: center;  
  16.     -moz-background-position-x: center;  
  17.     -ms-background-position-x: center;  
  18.     background-position-y: center;  
  19.     -moz-background-position-y: center;  
  20.     -ms-background-position-y: center;  
  21.     background-attachment: fixed;/* 使背景图片相当于可视区域 */  
  22. }  

 

 

时间: 2024-12-30 05:49:36

跨浏览器的遮罩层透明度的相关文章

基于JavaScript如何制作遮罩层对话框_javascript技巧

1.遮罩层其实就是一个覆盖全界面的半透明的DIV,并处理zIndex使他浮于其他元素之上,是用户不能点击下边的元素,或者说点击没有反应. 2.在遮罩层上方在弹出一个层,由于遮罩层挡住了其他所有元素,用户只能点击弹出层,制造出模式窗口的假象. 废话不多说了,直接给大家贴js代码了. <htmlxmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type&quo

在浏览器窗口上添加遮罩层的方法_基础知识

如何在浏览器窗口上添加一个遮罩层 背景 在web2.0中,页面弹窗是一个很常见的交互方式,这样既可以避免不必要的页面跳转,也可以改进界面的布局和可交互性. 但是,浏览器原生的弹窗函数(alert, confirm, prompt)有着很大的局限性,主要是它们的展现UI一来很不美观,二来也不够灵活,因此,我们经常需要自行定义弹窗函数. 当我们要实现一个模式弹窗时(模式弹窗,即是说出现弹窗时,页面其它地方不可点击),通常的做法是用一个div将整个页面窗口遮挡住. 实现 下面,我们一步步地实现一种较为

兼容主流浏览器的jQuery+CSS 实现遮罩层的简单代码_jquery

在页面点击"注册",出现一层有不透明度的黑色遮罩:遮罩层的上方是注册框:此时无法点击页面上除注册框外的其他元素:点击注册框上的"随便逛逛",遮罩层消失. 预览地址: http://jsfiddle.net/p2x3c7df/embedded/result/ 要点: 1.注册框始终水平.垂直居中,包括鼠标滚轮上下滚动页面.缩放页面和调整浏览器窗口大小时 主要由CSS控制,注册框的宽度和高度都已经确定( 620*420px ),首先使用position:fixed来使它

jQuery遮罩层实现方法实例详解(附遮罩层插件)_jquery

本文实例分析了jQuery遮罩层实现方法.分享给大家供大家参考,具体如下: 1 背景半透明遮罩层样式 需要一个黑色(当然也可以其他)背景,且须设置为绝对定位,以下是项目中用到的css样式: /* 半透明的遮罩层 */ #overlay { background: #000; filter: alpha(opacity=50); /* IE的透明度 */ opacity: 0.5; /* 透明度 */ display: none; position: absolute; top: 0px; lef

jquery实现简单的遮罩层_javascript技巧

本文实例讲解了jquery遮罩层,包括遮罩层的不同样式实现.mask实现遮罩层等,分享给大家供大家参考,具体内容如下 一.jQuery实现遮罩层的不同样式1.1 背景半透明遮罩层样式 需要一个黑色(当然也可以其他)背景,且须设置为绝对定位,以下是项目中用到的css样式: /* 半透明的遮罩层 */ #overlay { background: #000; filter: alpha(opacity=50); /* IE的透明度 */ opacity: 0.5; /* 透明度 */ display

jQuery弹出遮罩层效果完整示例_jquery

本文实例讲述了jQuery弹出遮罩层效果.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head&

jQuery实现简单网页遮罩层/弹出层效果兼容IE6、IE7_jquery

本屌丝最近工作要求重写网站所有代码,so...极其蛋疼的事情出现了,管我的人要求不能用网上的插件,oh~~~my god!! 这是多么能让千万只草原上的马儿奔腾的要求~~~ 先实现一个比较简单的功能: 需求:网页遮罩层/弹出层,兼容IE6 幸好本屌丝以前聪明收集了个js的版本,so,自己改写成了jQuery插件形式的,方便以后使用. 屁话不多放,无码无真相! 复制代码 代码如下: /******************************* * @name Layer跨浏览器兼容插件 v1.

JavaScript编写点击查看大图的页面半透明遮罩层效果实例_javascript技巧

这个效果用的很频繁,经常都会有人问我这个问题,所以要把它写成文章.下次再有人问就直接把这篇文章的URL丢出去就好了.这个效果很简单所以我就不做太多说明了,具体的看看代码注释就会明白.下面就是全部代码,复制到HTML中就可以运行的. <!DOCTYPE html> <style> #mask { position:fixed;width:100%; top:0px;left:0px; _position:absolute; _top:expression(documentElemen

javascript div 遮罩层封锁整个页面_javascript技巧

具体解决方案如下: 一.IE和FF下document.body对象的clientHeight,offsetHeight,scrollHeight属性的差别. clientHeight 在IE和FF下,该属性没什么差别,都是指浏览器的可视区域,即除去浏览器的那些工具栏状态栏剩下的页面展示空间的高度. offsetHeight 在IE下,offsetHeight也是浏览器可视区域的高(包括边线) 在FF下,offsetHeight是页面具体内容的高度 scrollHeight 在IE下,scroll