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

css遮盖层

javascripthtmlcss 
阅读更多
     网上例子很多，但是缺乏一个从简开始的讲解，今天碰到了这个问题，这里拿出来跟大家分享下； 既然是从简开始，那么一些css效果在后续补上，关键是看怎么实现这个遮盖效果！
     实现遮盖的关键点是用position属性来对页面进行立体的分层，利用上层覆盖下层的原理来实现，如果不理解position属性的朋友可以先去看看我的另一篇博客http://youzhibing.iteye.com/admin/blogs/2126710
html代码附上（决定页面有什么！）： 
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>灰度覆盖</title>
<link rel="stylesheet" href="css/override.css" type="text/css" />
<script type="text/javascript" src="js/override.js"></script>
</head>

<body>
	<a href="javascript:choose_open()" class="edit">[从地址簿中选择]</a>  	
    
	<!-- 表单层 -->
	<div id="choose_accept">
    
    	<!-- 表单头部 -->
            <a class=close href="javascript:choose_close();">[close]</a>
            
            <table>
                <tr>
                    <td colspan="3" class="td">   
                    </td>
                </tr>
                <tr>
                    <td class="td1">登录名：</td>
                    <td class="td2"><input type="text"/></td>
                    <td class="td3">*</td>
                </tr>
                <tr>
                    <td class="td1">密&nbsp;&nbsp;码：</td>
                    <td class="td2"><input type="password"/></td>
                    <td class="td3">*</td>
                </tr>
                <tr>
                    <td class="td1">验证码：</td>
                    <td class="td2"><input type="text"/></td>
                    <td class="td3">*</td>
                </tr>
                <tr>
                    <td colspan="3" align="center"><input type="submit" value="登陆"/></td>
                    
                </tr>
            </table>
    </div>
    
        <!-- 遮盖层 -->
    <div id="mid"></div>
</body>
</html>

注意css文件和js文件的应用，路径别用错了就好！
js代码很简单（页面能做什么） 
function choose_open(){
	document.getElementById('choose_accept').style.display="block";	//打开登陆页面；
	document.getElementById('mid').style.display="block";	//打开遮罩层；
}

function choose_close(){
	document.getElementById('choose_accept').style.display="none";	//关闭登陆页面；
	document.getElementById('mid').style.display="none";	//关闭遮罩层；
}

css代码也是简单的显示效果，没有增加修饰（页面长什么样） 
/* CSS Document */


/* 登录层 */
#choose_accept{
	display:none;
	width:360px;
	height:230px;
	background:#69F;
	position:absolute;
	top:30%;
	left:40%;
	z-index:1000;
	opacity:0.8;						/*背景的透明度:(Firefox适用；）*/
	filter:alpha(opacity =80);			/*背景的透明度:(IE适用)；*/
}

/*遮罩层*/
#mid{
	display:none;
	width:100%;
	height:100%;
	background:#000;
	position:absolute;
	top:0;
	left:0;
	z-index:10;
	opacity:0.4;						/*背景的透明度:(Firefox适用；）*/
	filter:alpha(opacity =40);			/*背景的透明度:(IE适用)；
}

css效果的话大家可以自己补上；有问题可以留言，一起交流！
0
顶
0
踩
分享到：
| css中position
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    JS+CSS遮盖层

    JS+CSS遮盖层，完全支持ie等主流浏览器，并解决在ie6下无法遮盖窗口级控件问题。

    Jquery做的遮盖层

    在网页开发中，jQuery是一个非常流行的JavaScript库，它极大地简化了DOM操作、事件处理和动画效果。"Jquery做的遮盖层"是一个常见的...通过灵活地调整CSS样式和jQuery事件，你可以定制遮盖层以适应各种网页设计需求。

    单击弹出遮盖层

    在IT行业中，"单击弹出遮盖层"是一个常见的前端交互设计，它涉及到网页UI设计、JavaScript编程以及CSS样式布局等多个技术领域。遮盖层通常用于创建一个半透明的覆盖层，当用户点击某个元素时，遮盖层会出现在整个...

    实用div实现的弹出层

    2. **CSS 遮盖层**：遮盖层通常是一个全屏的半透明背景，用于遮挡页面上的其他元素，使用户注意力集中于弹出层。通过设置CSS的`position`属性为`fixed`或`absolute`，使其相对于窗口或父元素定位，配合`z-index`来...

    用div+css制作弹出层遮罩层

    利用div+css制作弹出层并遮罩层，主用用了两个div，一个div用于弹出框，另一个则遮罩整个页面

    JavaScript弹出遮盖层

    2. **CSS样式**：接着，为遮盖层和弹出框添加合适的CSS样式。遮盖层通常设置为全屏大小，并具有一定的透明度，而弹出框则需要定位在屏幕中央。 ```css #overlay { position: fixed; top: 0; left: 0; width: ...

    超好用的Jquery弹出框和遮盖层

    2. **CSS样式**：为了让弹出框和遮盖层看起来美观并适应各种屏幕尺寸，我们需要添加CSS样式。遮盖层通常设置为全屏且不透明，而弹出框则设置为相对于视口居中，并具有合适的宽高和边距。 ```css .overlay { ...

    图片查看插件

    3. **CSS遮盖层**：遮盖层通常是一个全屏半透明的元素，用于覆盖网页内容并突出显示图片。CSS样式可以自定义其透明度、位置和大小，确保它能够无缝地融入到页面设计中。 4. **图片等比例放大**：为了保持图片的原始...

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

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

    基于vue开发的popup的mixins用于管理弹出框的遮盖层

    标题和描述中提到的"基于vue开发的popup的mixins用于管理弹出框的遮盖层"，就是这样一个设计模式，旨在解决如何优雅地处理弹出框及其遮盖层的问题。 首先，我们来理解一下`mixins`在Vue.js中的作用。`mixins`是一种...

    遮盖效果

    例如，在移动应用或网页设计中，我们经常看到遮盖层用于加载动画、弹出窗口或提示信息，通过半透明的覆盖层创造出视觉焦点。 在编程中，实现遮盖效果通常涉及以下知识点： 1. **CSS（层叠样式表）**：在网页设计中...

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

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

    popup的最优化实现（遮盖层），兼容firefox、ie6、google（网搜+整理）

    同时，遮盖层的实现可能使用了CSS的`opacity`和`pointer-events`属性，确保用户不能与遮盖层下的元素互动。 2. **JavaScript技术**：使用JavaScript来控制popup的显示和隐藏，可能包括事件监听、动态创建DOM元素...

    css js 蒙板进度条(可移动)

    在网页设计中，蒙板通常是指一种半透明覆盖层，用于遮盖页面的部分区域，从而将用户的注意力集中在特定的元素上。蒙板可以通过CSS的`opacity`属性、`rgba()`颜色函数或者使用CSS滤镜（filters）来实现。 接下来是...

    解决css中hover做遮盖罩闪动问题(推荐)

    在CSS中，`hover`伪类是用于定义元素在鼠标悬停时的样式，而“遮盖罩”通常指的是一个半透明的层，用于覆盖在其他元素上方，以实现特定的交互效果，如按钮悬停时显示提示或者阻止底层元素交互。然而，在实现这种效果...

    javascript 层遮罩效果

    CSS则用来定义对话框和遮罩层的样式，确保它们在页面上的正确展示和位置。例如： ```css .mask { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); z-index:...

    页面加载div遮罩层

    2. **Loading样式**：在提供的 `loading.css` 文件中，可能包含了定义遮罩层样式的CSS规则，比如设置背景色、透明度、边框、过渡效果等，以及如何在加载完成时移除遮罩层。 3. **JavaScript交互**：`loading.js` 和...

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

    - 当事件触发时，可以使用CSS类名切换（如添加或移除`show`类）来控制浮动层和遮罩层的显示与隐藏。 - 对于复杂的交互，可以使用JavaScript库或框架，如jQuery、React或Vue.js，它们提供了更高级的功能和优化过的...

    超酷的全屏遮盖显示图片效果

    其次，为了实现遮盖效果，JavaScript可能会创建一个全屏的遮罩层，这个遮罩层通常使用半透明的黑色或灰色，使得图片在显示时具有一定的朦胧感，增强神秘感或艺术效果。遮罩层可以通过CSS的`position`属性设置为`...

Magicbox
Global site tag (gtag.js) - Google Analytics