css 弹出层-透明层
<!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 弹出层-透明层的更多相关文章
- 纯CSS弹出层，城市切换效果
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...
- DIV JS CSS 轻量级弹出层 兼容各浏览器
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- JS 弹出层 定位至屏幕居中
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 69.js--点击事件等比例弹出层div
html:<!--弹出层导航栏--> <div class="public-nav-content"> <ul> <li><a ...
- JavaScript弹出层
1.这个弹出层就是一个DIV 2.看需要什么效果 2.1.如果是仅仅需要弹出层,而背后的网页同样可以点击,那么只需要一个DIV即可,效果如图: 2.2.需要一层透明背景,而后面的网页只能看不能点,效果 ...
- div滚动条弹出层效果 （所需要的css文件和js文件，都已经上传到文件里面了progressbar.rar）
<%--总的弹出层--%> <div class="tcck" id="joinclub" style="display:none& ...
- html/css/js-layer弹出层的初次使用
学习前端有时很多时候要用到弹出层,原生的js写有些麻烦,而且不美观,基于jQuery的弹出层组件layer应运而生,近些年来备受青睐.官网上有使用教程,但当初用的时候还是糊里糊涂,今天来记录一下lay ...
- 点击图片或者鼠标放上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 ...
- Asp.net弹出层并且有遮罩层
长久以来,asp.net弹出层并且有遮罩层问题都是一个难以解决的问题,鉴于此,我决定写个弹出层发布出来,供大家使用... 这里的doing层是遮罩层,divLogin层是登陆层 若有其他问题请留言或邮 ...
随机推荐
- linux指令记录
sudo mount /dev/sda3 data 挂载硬盘到当前目录下的data文件夹
- CentOS 访问Windows7共享文件夹
在终端中输入命令mount -t cifs -o username="xxx",password="****" //192.168.1.1/share_fold ...
- linux下rm -r误删NTFS文件恢复方法
一时疏忽,手一抖,把整个挂载的F盘删了一半!顿时傻眼!! 被删的F盘是Windows下NTFS分区,在Ubuntu12.04中挂载了F盘,使用rm命令时粗心大意,误删了一半的数据. 血的教训告诉我们, ...
- spring batch部分
引用高人的:http://kanpiaoxue.iteye.com/blog/1768887
- JS 跨源请求
一个 URL 大概包含的部分:scheme://host:port/path?#hash 比如一个 URL 为 http://www.xxx.com:8888/school/student.html, ...
- 我对C#的理解
C#里面所有东西都可以看作对象.接口,类,枚举等等. 类是最常用的,可以继承别的接口,类等,就会自动拥有别人的功能. 接口是类的概要.给别人看的协议,好像一个人对外做出的承诺. 抽象类是实现了部分承诺 ...
- 手机移动端confirm替换方案
//弹框 ;(function () { var ConfirmBox = function (options){ this.defaults = { title:"", topT ...
- [Leetcode][JAVA] Binary Tree Level Order Traversal
Given a binary tree, return the level order traversal of its nodes' values. (ie, from left to right, ...
- hdu 5661 Claris and XOR
Claris and XOR Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others)To ...
- 播放一个视频并用滚动条控制进度-OpenCV应用学习笔记二
今天我们来做个有趣的程序实现:利用OpenCV读取本地文件夹的视频文件,并且在窗口中创建拖动控制条来显示并且控制视频文件的读取进度. 此程序调试花费了笔者近一天时间,其实大体程序都已经很快写出,结果执 ...