<!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. NetBeans无法使用编码GBK安全地打开该文件(改为默认UTF-8)

    用文本编辑器打开NetBeans安装目录下etc\netbeans.conf文件,找到”netbeans_default_options=”字段,在后面添加” -J-Dfile.encoding=UT ...

  2. C#将科大讯飞语音合成文件转换为MULAW音频格式

    任务描述:通过科大讯飞语音合成组件在线完成文本转语音的合成,然后再转换为电话系统IVR要求的音频格式: wave mu-law 16位 8kHZ 64kbps. 完成步骤: 首先,我们要先通过科大讯飞 ...

  3. UVALive 4329 Ping pong（树状数组）

    题目链接:http://acm.hust.edu.cn/vjudge/problem/viewProblem.action?id=13895 题意:一条街上住有n个乒乓选手,每个人都有一个技能值,现在 ...

  4. 使用github与jekyll搭建个人博客（一）

    虽然使用博客园还没有多久,但是最近看到一些大神的博客觉得很是炫酷.于是突发奇想,想要搭建自己的博客站点儿.编程菜鸟一枚,还是想要记录下最近的搭建博客经历. 使用github搭建个人博客的方式有很多,百 ...

  5. windows 7下qtcreator里QWT文件的pro配置

    http://blog.chinaunix.net/uid-20717410-id-272331.html 把编译好的qwt的include文件夹下面 所有的.h文件 复制到qt目录下 然后在pro里 ...

  6. [原] XAF ListView 凍結列

    using System; using System.ComponentModel; using System.Collections.Generic; using System.Diagnostic ...

  7. [原] XAF 如何啟用ListView橫向滾動條

    using System; using DevExpress.ExpressApp; using DevExpress.ExpressApp.Win.Editors; using DevExpress ...

  8. listview选中没有效果

    listview选中没有效果了,设置了android:listselector也没有效果,最后发现是listview中的item布局设置了背景颜色导致,把item的背景色去掉就OK了 http://b ...

  9. MySQL数据库“局部”乱码

    问题:“网页显示中午”与“数据库查看中文”总有一个是乱码,或者“网页中总有部分中文乱码” 装了PHPStudy之后,用alter修改过一次数据库的编码方式为utf8!当时的网页的编码显示是正常的,所以 ...

  10. MySQL 升级详细步骤 （包括 Percona)

    MySQL 升级步骤 MySQL 5.1.72 升级到 MySQL 5.5.36 鉴于我在升级的时候遇到的麻烦问题,我觉得有必要把一些细节说清楚,免得引起误解了.感觉官方文档上的升级步骤写的比较简单, ...