<!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. 用SYS_CONNECT_BY_PATH进行层级查询时的排序问题

    用SYS_CONNECT_BY_PATH进行层级查询时, 对同一级别的节点进行排序,可以加order SIBLINGS by 子句实现 WITH N2 AS( SELECT n.ID, org.&qu ...

  2. css清除浮动的方法汇总

    这是在其他地方看到的一篇文章,汇总的不错,摘过来做个记录. 引用地址 : http://www.cnblogs.com/ForEvErNoME/p/3383539.html ------------- ...

  3. Java 元注解

    元注解@Target,@Retention,@Documented,@Inherited * * @Target 表示该注解用于什么地方,可能的 ElemenetType 参数包括: * Elemen ...

  4. [转]oracle job有定时执行的功能,可以在指定的时间点或每天的某个时间点自行执行任务。

    oracle job有定时执行的功能,可以在指定的时间点或每天的某个时间点自行执行任务. 一.查询系统中的job,可以查询视图 --相关视图 select * from dba_jobs; selec ...

  5. uva 11401 Triangle Counting

    // uva 11401 Triangle Counting // // 题目大意: // // 求n范围内,任意选三个不同的数,能组成三角形的个数 // // 解题方法: // // 我们设三角巷的 ...

  6. case when then else end 用法

    前段时间做项目过程中制作报表时编写的sql需要用到的case when then else end,因此将case的用法总结一下吧. CASE命令有两种语句格式:语法形式1:CASE expressi ...

  7. thinkphp学习笔记(一)

    一.入门与安装 1.进入C:\Windows\System32\drivers\etc的hosts文件中增加127.0.0.1 www.tp5.com 即访问这个域名就相当于访问127.0.0.1 2 ...

  8. JS正则表达式验证数字

    <script type="text/javascript"> function validate(){ var reg = new RegExp("^[0- ...

  9. JAVA读取TXT文件、新建TXT文件、写入TXT文件

    1.创建TXT文件 按照正常的逻辑写就好 先定义一个文件给定一个路径——>判断这个路径上这个文件存不存在——>若不存在则建立,try/catch根据程序提示自动生成就好 2.读取TXT文件 ...

  10. Linux环境变量配置

    /etc/profile:此文件为系统的每个用户设置环境信息,当用户第一次登录时,该文件被执行.并从/etc/profile.d目录的配置文件中搜集shell的设置./etc/bashrc:为每一个运 ...