`

跨浏览器的遮罩层透明度

阅读更多

跨浏览器的遮罩层透明度

css 样式:

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

 遮罩div的全部样式:

#loadPanel {
	overflow-y: auto;
	overflow-x: auto;
	width: 100%;
	top: 97px;
	left: 0px;
	position: absolute;
	background-color: rgba(255, 255, 255, 0.5);
	filter: alpha(opacity =   30);
	/*opacity: .3;*/
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
	z-index: 99999;
	/*background-image: url("../images/loading.gif");*/
	background-repeat: no-repeat;
    background-position-x: center;
    -moz-background-position-x: center;
    -ms-background-position-x: center;
	background-position-y: center;
    -moz-background-position-y: center;
    -ms-background-position-y: center;
	background-attachment: fixed;/* 使背景图片相当于可视区域 */
}

 

 

 

 

0
4
分享到:
评论

相关推荐

    web页在微信中访问增加遮罩层 右上角弹出在浏览器中打开

    - **添加遮罩层**:利用CSS创建一个全屏的遮罩层,设置适当的透明度和位置。 - **提示按钮**:在遮罩层的右上角放置一个“在浏览器中打开”的按钮,通常会设计成醒目的样式,吸引用户点击。 - **监听事件**:当...

    微信跳转 微信遮罩层.zip

    开发者可以将这个组件集成到自己的微信应用中,根据需求进行定制,比如调整遮罩层的颜色、透明度,以及加载动画的样式等。 在淘客(Taoke,即网络推广者)的应用场景下,这种微信跳转和遮罩层功能尤为重要。淘客...

    自定义半透明遮罩层-源码

    6. **兼容性处理**:对于一些老旧的浏览器,可能需要处理对`rgba()`颜色透明度的支持,或者使用`opacity`属性代替。 在"自定义半透明遮罩层-源码"中,我们可以期待找到上述各种技术的具体实现,包括HTML结构、CSS...

    自定义半透明遮罩层

    在网页设计和开发中,自定义半透明遮罩层是一种常见的视觉效果,它通常用于创建交互式的用户体验,比如加载提示、...在实际项目中,可能还需要考虑浏览器兼容性、性能优化等问题,确保遮罩层在各种环境下都能正常工作。

    js+html5实现半透明遮罩层弹框效果

    其中rgba中的最后一个参数0.5代表透明度为50%,即半透明效果。示例CSS如下: ```css .tip { text-align: center; position: absolute; height: 100%; width: 100%; background-color: rgba(90, 90, 90, 0.5); /...

    html的遮罩层原理

    - **透明度**:`opacity`属性控制遮罩层的透明度,通常设置为0.5或其他适当的值,使其半透明。 - **背景颜色**:使用`background-color`设置遮罩层的颜色,如`rgba(0, 0, 0, 0.5)`,其中`rgba`中的最后一位是透明...

    点击弹出浮动层 弹出遮罩层

    遮罩层的透明度可以根据设计师的需求进行调整,从完全不透明到完全透明,以达到不同的视觉效果。 3. **实现技术**:在现代网页开发中,这种效果可以通过HTML、CSS和JavaScript实现。HTML用于构建页面结构,CSS用于...

    在iframe 中页面中设置遮罩遮罩层

    这里的CSS样式定义了遮罩层`.mask`,它是一个全屏的半透明黑色背景,位于所有元素之上(`z-index: 9999`)。JavaScript部分提供了`showMask`和`hideMask`两个函数,分别用于显示和隐藏遮罩层。在示例中,我们监听了...

    ie firefox做了一个遮罩层

    综上所述,创建一个跨浏览器的遮罩层需要考虑CSS的布局、透明度、Z轴顺序以及JavaScript的动态显示和隐藏功能。在不同的浏览器中,可能需要针对特定的渲染差异进行调整,以确保一致的用户体验。通过理解和应用这些...

    遮罩层效果(最新),简单易用

    透明度可以通过调整opacity属性来控制,也可以使用rgba()函数设置背景颜色,从而实现半透明效果。为了实现跨浏览器兼容性,可能需要使用浏览器特定的前缀,如"-webkit-"、"-moz-"和"-ms-"来支持不同浏览器的CSS3属性...

    (HTML+js+css)遮罩层实现源码

    `#mask`是遮罩层元素,通常设置为全屏并具有一定的透明度。`#modal`是模态窗口,可以设置定位使其居中。加载指示器`#loading`和模态窗口内容`#modal-content`可以根据需求自定义样式: ```css /* overlay.css */ * ...

    alert遮罩层显示内容

    在HTML中,可以创建一个div元素作为遮罩层,设置适当的CSS属性,如`position: fixed`、`z-index: high`以及合适的透明度和宽高,使其覆盖整个页面。然后,用JavaScript控制其显示和隐藏。CSS3的过渡和动画效果可以让...

    html5+css3 弹出遮罩层

    这是一款使用html5 svg和css3制作的全屏遮罩导航菜单...这里使用一些视觉差小把戏使遮罩层消失:我们为可见元素设置transition delay使透明度首先开始改变。 其他一些demo中我们使用了Snap.svg来制作SVG路径变形动画。

    JS遮罩层效果

    在网页设计中,遮罩层(Mask Layer)是一种常见且实用的技术,它可以在页面上覆盖一层半透明或全黑的背景,以突出显示特定内容或者阻止用户与页面其他部分的交互。本文将详细介绍如何使用JS实现这种遮罩层效果,并...

    兼容IE6的遮罩层

    "兼容IE6的遮罩层"是一个常见的技术挑战,涉及到网页元素的层叠上下文、透明度处理和CSS hack等知识点。下面将详细阐述这些内容。 首先,遮罩层(Mask)是一种在网页上覆盖一层半透明或全透明的元素,以达到突出...

    前端-商品遮罩层(多种方法实现)

    - **遮罩层样式**:为`mask-layer`设置透明度,覆盖整个页面,并通过相对或绝对定位使其覆盖在页面内容之上。 ```css .mask-layer { position: fixed; top: 0; left: 0; width: 100%; height: 100%; ...

    遮罩层 Js 只需调用 一个方法

    在遮罩层元素上设置CSS样式,如`position: fixed`使其相对于浏览器窗口定位,`width`和`height`设为`100%`覆盖整个屏幕,`z-index`确保其位于其他元素之上,`background-color`设置背景颜色,`opacity`控制透明度。...

    漂亮的遮罩层v1.4.3

    1. **CSS和JavaScript**:遮罩层的实现通常涉及到CSS来设置样式,包括颜色、透明度、位置等,以及JavaScript来控制动态行为,如显示、隐藏、动画效果等。 2. **响应式设计**:为了适应不同设备和屏幕尺寸,遮罩层...

    弹出带视频播放器全屏遮罩层

    2. **CSS样式**:遮罩层的透明度(`opacity`)和背景颜色(`background-color`)需要调整以达到半透明效果。视频播放器的定位(`position`)设置为`absolute`或`fixed`,并用`top`和`left`属性使其保持屏幕中央。 3...

    透明层 解析 跨浏览器实现

    ### 透明层解析与跨浏览器实现 在网页设计与开发过程中,为了达到视觉效果的一致性和兼容性,经常需要创建透明层。透明层通常用于在页面上覆盖一层半透明的效果,比如模态对话框、遮罩层等。本文将详细介绍如何实现...

Global site tag (gtag.js) - Google Analytics