<!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. React jQuery公用组件开发模式及实现

    目前较为流行的react确实有很多优点,例如虚拟dom,单向数据流状态机的思想.还有可复用组件化的思想等等.加上搭配jsx语法和es6,适应之后开发确实快捷很多,值得大家去一试.其实组件化的思想一直在 ...

  2. 为什么匿名内部类只能访问final变量【转】

    是变量的作用域的问题,因为匿名内部类是出现在一个方法的内部的,如果它要访问这个方法的参数或者方法中定义的变量,则这些参数和变量必须被修饰为final.因为虽然匿名内部类在方法的内部,但实际编译的时候, ...

  3. [转]Redis之七种武器

    长生剑.孔雀翎.碧玉刀.多情环.离别钩.霸王枪.拳头是古龙笔下的七种武器,而本文打算将Redis的几种使用方式 Strings.Hashs.Lists.Sets.Sorted Sets.Pub/Sub ...

  4. 河南省第四届ACM程序设计大赛

    A: 序号互换 #include <cstdio> #include <cstdlib> #include <cstring> #include <algor ...

  5. a标签创建超链接,利用a标签创建锚点

    #Html今日学习内容 <!DOCTYPE html> <html> <head lang="en">     <meta charset ...

  6. fatal error C1010: 在查找预编译头时遇到意外的文件结尾。是否忘记了向源中添加“#include "StdAfx.h"”? 解决方法

    错误描述: fatal error C1010: 在查找预编译头时遇到意外的文件结尾.是否忘记了向源中添加“#include "StdAfx.h"”? 错误分析:     此错误发 ...

  7. eclipse maven testng

    安装过程: 1.eclipse官网下载:

  8. Hibernate component mapping

    A Component is a containted object that is be persisted value type and not an entity.But you can emb ...

  9. Oracle Created (Default) Database Users

    http://www.idevelopment.info/data/Oracle/DBA_tips/Database_Administration/DBA_26.shtml DBA Tips Arch ...

  10. 强大好用的"文本"编辑器

    1 editplugs 说明:EditPlus是一款由韩国 Sangil Kim (ES-Computing)出品的小巧但是功能强大的可处理文本.HTML和程序语言的Windows编辑器,你甚至可以通 ...