`

css半透明层

    博客分类:
  • CSS
阅读更多
    首次登录弹出提示层,主要有两个层:半透明层,遮住下面的内容;提示层(主要内容),下面为这两个层的css样式。针对IE透明使用的是filter:alpha(opacity=35),针对FF透明的相关代码是opacity:0.35,这样至少在IE和FF下是兼容的,通过测试。

.mask {
	border:0px;
	background:#000;
	width:100%;
	height:1210px;
	margin:0px;
	z-index:999;
	padding:0px;
	position:absolute;
	top:0px;
	left:0px;
	filter:alpha(opacity=35);	
	opacity:0.35;	
}
.mask_prompt {
	position:absolute;
	z-index:1000;
	width:486px;
	height:307px;
	left:50%;
	top:50%;
	margin:-153px 0 0 -243px;
	background:url(../images/prompt_bj.png) no-repeat;
} 
分享到:
评论

相关推荐

    css 半透明全屏蒙层 全屏屏蔽 内容绝对居中

    接下来,我们用CSS来实现半透明全屏蒙层。我们可以使用`position: fixed`将蒙层设置为固定定位,覆盖整个屏幕。通过设置`z-index`确保蒙层位于所有元素之上,然后用`background-color`和`opacity`创建半透明效果: ...

    css3半透明遮罩背景lightbox图片展示特效

    Lightbox是一种流行的设计模式,当用户点击图片预览链接时,会在当前页面上弹出一个全屏或半屏的图片视图,同时提供一个半透明的遮罩层,以增强用户体验。 一、CSS3半透明遮罩 半透明遮罩可以通过设置`opacity`属性...

    js+CSS实现弹出居中背景半透明div层的方法.docx

    我们使用 CSS 将背景半透明层的宽度和高度设置为 100%,并使用 filter 属性或 opacity 属性来实现背景半透明效果。 在 JavaScript 中,我们定义了两个函数,pupopen() 和 pupclose(),用于控制背景半透明层和弹出...

    CSS实现半透明效果

    在本主题中,我们将深入探讨如何使用CSS实现半透明效果,这是一个常见的视觉设计技巧,可以使网页元素呈现出不同程度的透明度,从而增加界面的层次感和美感。 在CSS中,半透明效果主要通过调整元素的`opacity`属性...

    网站首页悬浮半透明可关闭css+js引导层

    "网站首页悬浮半透明可关闭css+js引导层"是一个利用CSS(层叠样式表)和JavaScript技术实现的网页组件,它的主要特点是半透明效果、悬浮于首页上方以及用户可以自由关闭。下面将详细讲解这个组件的实现原理和关键...

    纯css实现内容下面的半透明层

    纯css手打,用before伪元素实现的一层半透明层,你可以看到下面的背景图,也可以看见上面内容,也就是他是在背景和内容之间的一层

    HTML5+CSS3 制作的图片半透明遮罩效果

    1. **伪元素**:我们可以利用`::before`或`::after`伪元素在图像上方添加一层半透明的颜色。例如: ```css .image-container::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; ...

    css3半透明遮罩lightbox效果.zip

    1. **半透明遮罩(Overlay)**:这是一种覆盖整个页面的半透明层,用于突出显示弹出的图像。CSS3提供了`rgba()`函数,允许我们创建具有透明度的色彩,例如`rgba(0, 0, 0, 0.8)`创建了一个80%不透明的黑色遮罩。通过...

    CSS和Javascript实现的DIV半透明飘浮层

    通过点击按钮显示半透明遮盖层以及信息层 用CSS实现的固定飘浮,以及用Javascript实现的定位飘浮 用VS2008打开后直接运行UserShowPanelTest.aspx的效果是CSS实现的效果,要实现Javascript飘浮效果需要取消Javascript中...

    CSS实现半透明div层的方法.rar

    在本案例中,我们关注的是如何利用CSS来创建一个半透明的div层。半透明div层在网页设计中有着广泛的应用,比如用于创建悬浮窗口、遮罩层或者过渡效果。 首先,我们需要理解CSS中的透明度概念。CSS3引入了`opacity`...

    html+css透明背景

    在CSS中,我们可以使用`opacity`属性来创建一个元素的半透明效果。`opacity`属性接受一个0到1之间的数值,其中0表示完全透明,1表示完全不透明。但是,当为整个元素设置`opacity`时,该元素及其所有子元素都会受到此...

    css 网站半透明素材分享 PSD 半透明图片素材 网页素材

    总结来说,这个资源包提供了适用于网页设计的半透明图片素材,结合CSS技术,能够帮助设计师轻松创建出富有视觉层次感和现代感的网页界面。无论是按钮、导航元素还是装饰性元素,这些素材都能为网页增添一份精致和...

    CSS以及js半透明

    ### CSS及JavaScript实现半透明效果 #### 一、引言 在Web开发中,实现元素的半透明效果是一项常见的需求,它可以为用户界面增添视觉层次感,并有助于提高用户体验。通过CSS(层叠样式表)与JavaScript相结合的方式...

    自定义半透明遮罩层

    本篇将深入探讨如何实现自定义半透明遮罩层,以及相关的HTML、CSS和JavaScript技术。 首先,我们需要理解HTML结构。在HTML中,我们可以创建一个`<div>`元素作为遮罩层的基本结构。例如: ```html <div id="mask">...

    灰色半透明CSS商务模板

    【灰色半透明CSS商务模板】是一款专为商务网站设计的英文网页模板,其特色在于采用灰色调和半透明效果,营造出一种简洁而高级的视觉体验。在网页设计领域,CSS(Cascading Style Sheets)是用于描述HTML或XML(包括...

    CSS3鼠标悬停图片半透明渐变颜色背景遮罩动画特效

    在本文中,我们将深入探讨如何使用CSS3实现一个精美的鼠标悬停图片半透明渐变颜色背景遮罩动画特效。这个特效在用户将鼠标指针悬停在图片上时,会在图片上方添加一层带有渐变颜色的遮罩,当鼠标移开时,遮罩会以平滑...

    div背景半透明,覆盖整个可视区域的遮罩层效果

    1 、半透明效果可以使用 css3 中的 opacity 属性,在低版本的IE浏览器中使用IE的alpha 滤镜。代码: .opacity{ opacity:0.3; filter: alpha(opacity=30); background-color:#000; } 2 、要覆盖整个可视区域通常的...

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

    在现代网页设计中,半透明遮罩层弹框效果是一种非常常见的交互方式,它不仅可以提升用户体验,还能让页面更加美观。通过JavaScript与HTML5的结合使用,我们可以轻松地实现这一效果。 #### 二、技术背景 在开始之前...

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

    CSS样式是实现半透明遮罩层的关键。通过使用rgba颜色值,可以控制背景颜色的半透明效果。其中rgba中的最后一个参数0.5代表透明度为50%,即半透明效果。示例CSS如下: ```css .tip { text-align: center; position:...

    CSS透明度定义

    其中,CSS透明度设置是一项非常实用的功能,它允许开发者调整页面元素的不透明度,从而实现半透明或其他视觉效果。本文将深入探讨CSS透明度的概念、不同浏览器下的兼容性问题以及如何通过多种方式来设置透明度。 ##...

Global site tag (gtag.js) - Google Analytics