<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>透明层-弹出层</title>
<style>
*{margin:0;padding:0;}
.main{width:100%; height:1000px;}
.div1{
top:0;
left:0;
width:100%;
height:1000px;
position:absolute;
z-index:10;

}
.div2{
width:100%;
height:1000px;
z-index:-1;
position:absolute;
/**透明层*/
background:#000000;
filter:alpha(opacity=70);
-moz-opacity:0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
}
.div3{
margin-left:100px;
width:100px;
height:200px;
background:yellow;
}
</style>
</head>
<body >
<div class="main">dsadd</div>
<div class="div1">

<!-- 因为子元素会继承父元素的透明层opacity 所以定义一个空div作为透明层 -->

<div class="div2"></div>
<div class="div3">wqeqwe</div>
</div>
</body>
</html>

css 弹出层-透明层的更多相关文章

  1. 纯CSS弹出层,城市切换效果

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  2. DIV JS CSS 轻量级弹出层 兼容各浏览器

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. JS 弹出层 定位至屏幕居中

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. 69.js--点击事件等比例弹出层div

    html:<!--弹出层导航栏--> <div class="public-nav-content"> <ul> <li><a ...

  5. JavaScript弹出层

    1.这个弹出层就是一个DIV 2.看需要什么效果 2.1.如果是仅仅需要弹出层,而背后的网页同样可以点击,那么只需要一个DIV即可,效果如图: 2.2.需要一层透明背景,而后面的网页只能看不能点,效果 ...

  6. div滚动条弹出层效果 (所需要的css文件和js文件,都已经上传到文件里面了progressbar.rar)

    <%--总的弹出层--%> <div class="tcck" id="joinclub" style="display:none& ...

  7. html/css/js-layer弹出层的初次使用

    学习前端有时很多时候要用到弹出层,原生的js写有些麻烦,而且不美观,基于jQuery的弹出层组件layer应运而生,近些年来备受青睐.官网上有使用教程,但当初用的时候还是糊里糊涂,今天来记录一下lay ...

  8. 点击图片或者鼠标放上hover .图片变大. 1)可以使用css中的transition, transform 2) 预先设置一个 弹出div. 3)弹出层 alert ; 4) 浏览器的宽度document.documentElement.clientWidth || document.body.clientWidth

    变大: 方法一: 利用css属性. 鼠标放上 hover放大几倍. .kecheng_02_cell_content img { /*width: 100px; height: 133px;*/ wi ...

  9. Asp.net弹出层并且有遮罩层

    长久以来,asp.net弹出层并且有遮罩层问题都是一个难以解决的问题,鉴于此,我决定写个弹出层发布出来,供大家使用... 这里的doing层是遮罩层,divLogin层是登陆层 若有其他问题请留言或邮 ...

随机推荐

  1. iOS 清除web cookies

    NSHTTPCookie *cookie; NSHTTPCookieStorage *storage = [NSHTTPCookieStorage sharedHTTPCookieStorage]; ...

  2. Python 10 —— 杂

    Python 10 —— 杂 科学计算 NumPy:数组,数组函数,傅里叶变换 SciPy:依赖于NumPy,提供更多工具,比如绘图 绘图 Matplitlib:依赖于NumPy和Tkinter

  3. 03、AngularJs的模块与控制器

    大部分的应用程序都有一个主方法(main)来组织,实例化,启动应用程序.而AngularJs应用是没有主方法的,它是通过模块来声明应用应该如何启动的.同时,模块允许声明来描述应用中依赖关系,以及如何进 ...

  4. erlang学习笔记(shell命令)

    erlang shell 命令: help(). 可以查看erlang shell内置命令. 比如:m(Mod),可以查看模块Mod. 待续..

  5. 【图像处理】第三次实验:JPEG图像压缩

    1.任务说明 将LENA图像用JPEG方式压缩. 2.算法原理 JPEG(Joint Photographic Experts Group)是一个由ISO和IEC两个组织机构联合组成的一个专家组,负责 ...

  6. Angular 2 + Electron 开发web和桌面应用

    https://github.com/zhongzf/angular2-electron-quickstart Web用法: # Clone this repository git clone htt ...

  7. 基于Selenium的自动化测试 C#版(1)

    引子 我一直在思考,作为一个架构师,如何简化程序员的工作,减轻运维的压力,减低测试的要求.然后做了很多很多的尝试.最开始的公司培训文档,一键发布工具,Nuget版本管理,VS项目模板,SOA统一服务提 ...

  8. [.NET领域驱动设计实战系列]专题三:前期准备之规约模式(Specification Pattern)

    一.前言 在专题二中已经应用DDD和SOA的思想简单构建了一个网上书店的网站,接下来的专题中将会对该网站补充更多的DDD的内容.本专题作为一个准备专题,因为在后面一个专题中将会网上书店中的仓储实现引入 ...

  9. ENode 2.0 - 深入分析ENode的内部实现流程和关键地方的幂等设计

    前言 ENode是一个基于消息的架构,使用ENode开发的系统,每个环节都是处理消息,处理完后产生新的消息.本篇文章我想详细分析一下ENode框架内部是如何实现整个消息处理流程的.为了更好的理解我后面 ...

  10. Java设计模式11:外观模式

    外观模式 外观模式是对象的结构模式,外部与一个子系统的通信必须通过一个统一的外观对象进行.外观模式是一个高层次的接口,使得子系统更易于使用. 医院的例子 现代的软件系统都是比较复杂的.假如把医院比作一 ...