使用元素的opacity 属性，设置遮罩层的效果， 主要 样式是：background-color: #ooo; opacity:0.3;

<div style="width:500px; height:500px;position:fixed; top :0px;background-color:#000;opacity:0.3;text-align:center">

      <div style="float:right; width:100px;height:100%; z-index:10;line-height:500px;background-color:blue;opacity:1;">dfaaf

      </div>

</div>

　　

原因分析： 使用css的opcity属性改变某个元素的透明度，但是其元素下的子元素的透明度也会被改变，即便重定义也没有用，不过有个方法可以实现，大家可以看看。

可以使用一张透明的图片做背景可以达成效果，但是有没有更简单的方法呢？使用RGBA。

<div style="width:500px; height:500px;position:fixed; top :0px;background-color:#000;background: rgba(0, 0, 0, 0.5);text-align:center">

<div style="float:right; width:100px;height:100%; z-index:10;line-height:500px;background-color:blue;opacity:1;">dfaaf

</div>

</div>

　　

解释：这是黑色半透明的代码(设置背景色 同时设置opacity（透明度，取值范围0-1）)

　　　　　前三个值表示颜色的red,green,blue值

　　　　　最后一个表示alpha值，就是透明度值，不透明为1

　　　　　（支持IE8+以及所有现代浏览器）

父级div 使用rgba ,效果可以了，如下图；

怎么实现父级div透明，子div不透明呢？下面这个代码片段还可以参考：

原文： http://www.cnblogs.com/mxw09/archive/2011/09/27/2193238.html

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

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>css外层DIV半透明内层div不透明-弹出层效果的实现【实例】</title>

    <style type="text/css">

        <!--

        body,td,th {

            font-size: 12px; padding:0; margin:0;

        }

        .tanchuang_wrap{ width:600px; height:400px;position:absolute;left: 0px;top: 0px;z-index:100; display:none;}

        .lightbox{width:600px;z-index:101; height:400px;background-color:red;filter:alpha(Opacity=20);-moz-opacity:0.2;opacity: 0.2; position:absolute; top:0px; left:0px;}

        .tanchuang_neirong{width:353px;height:153px;border:solid 1px #f7dd8c;background-color:#FFF;position:absolute;z-index:105;left: 123px;top: 123px;}

        -->

    </style>

    <script language="javascript">

        function closeDiv(divId){

            document.getElementById(divId).style.display = 'none';

        }

        function displayDiv(divId){

            document.getElementById(divId).style.display = 'block';

        }

    </script>

</head>

<body>

<div style="width:400px; height:400px; position:relative; text-align:center;">

    <div class="tanchuang_wrap" id="aaaa">

        <div class="lightbox"></div>

        <div class="tanchuang_neirong">

            <p><span onClick="closeDiv('aaaa')" style=" cursor:pointer;">关闭</span></p>

            这里是弹窗内容

        </div>

    </div>

    <span onclick="displayDiv('aaaa')" style="cursor:pointer;">点击我</span>

    <p>测试通过，兼容IE6.0、IE7.0、火狐3.6、遨游等各大浏览器</p>

</div>

</body>

</html>

　　效果如下图：

css实现遮罩层，父div透明，子div不透明的更多相关文章

  1. CSS常用遮罩层

    为什么80%的码农都做不了架构师?>>>   CSS常用遮罩层 应用场景: 上传了一张图片,鼠标移入到图片上的时候显示遮罩层,并且提示点击删除. 通过改变遮罩层的透明度来实现显示隐藏 ...

  2. html、css和js原生写一个模态弹出框，顺便解决父元素半透明子元素不透明效果

    模态框: html部分: <!-- 按钮 --> <button id="box" onclick="pop_box()">弹出框< ...

  3. CSS+DIV：父DIV相对定位+子DIV绝对定位

    如何在一个div内将一个div进行绝对定位呢?很简单,把父div的position属性设为relative,子div的position属性设为absolute就可以了... 示例: <html& ...

  4. css 父div如何包裹带有float属性的子div,float子div如何撑开父div

    来自网络摘抄 原始代码 <style> #div1{border:1px solid red;float:left;} #div2,#div3{float:right;border:1px ...

  5. Jquery实现遮罩层，就是弹出DIV周围都灰色不能操作

    <%@ page language="java" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC & ...

  6. 【html】【8】div布局[子div在父div居底]

    从今天起 开始细话div布局   思路及要点: 父div的位置设置成相对的,即“position: relative;”. 而子div的位置设置成绝对的,并且下边缘设为0,即“position: ab ...

  7. css hover遮罩层

    马上月底了, 这个月忙于工作和生活, 没有很好的写一篇博客, 有点忧伤. 为了弥补, 就写点简单的. 最近项目有个需求, 就是鼠标移入的时候显示一个层, 移除的时候这个层消失. 当然层是可以点击进行额 ...

  8. 前端小结（3）---- 添加遮罩层，并弹出div

    有如下div: <div id='pop-div' class="pop-box"> <div class="input-group has-info& ...

  9. css实现遮罩层(解决透明背景上的文字不透明)

    .PopUp_layer{   position:fixed;   top: 0;   left: 0;   right:0;   bottom:0;   width:100%;   height:1 ...

随机推荐

  1. escape,encodeURI,encodeURIComponent函数比较

    escape,encodeURI,encodeURIComponent函数比较 js对文字进行编码涉及3个函数:escape,encodeURI,encodeURIComponent,相应3个解码函数 ...

  2. python 提供INI配置文件的操作 ConfigParser

    原文地址:http://www.cnblogs.com/pumaboyd/archive/2008/08/11/1265416.html 红色的为标注信息 +++++++++++++++++引用+++ ...

  3. 结构-行为-样式-PS笔记

    1.矩形选框,按住Shift就可以成为正圆或者正方形.按住ALt就可以控制圆心的位置: 2.美颜:滤镜--模糊--回到开始--历史记录工具,去掉不要的地方. 3.套索工具双击闭合:4.钢笔工具是做选区 ...

  4. MVC源码解析 - Http Pipeline 解析(上)

    IHttpHandler applicationInstance = HttpApplicationFactory.GetApplicationInstance(context); 上一篇说到了创建 ...

  5. Java实践 — SSH远程执行Shell脚本（转）

    原文地址:http://www.open-open.com/lib/view/open1384351384024.html 1. SSH简介         SSH是Secure Shell的缩写,一 ...

  6. 【.NET-EF】Entity Framework学习笔记2 - 增删改（没查询）

    学习描述:用EF就像是省略了做实体类和DAL类,感觉是很方便,废话不多说,直接写步骤: 1.创建EF的edmx文件 这个其实在笔记1已说过,不过有些细节也要说,所以再说一遍,这里使用的是EF 6.1版 ...

  7. USACO 3.4 American Heritage

    American Heritage Farmer John takes the heritage of his cows very seriously. He is not, however, a t ...

  8. js导出execl兼容ie Chrome Firefox各种主流浏览器(js export execl)

    第一种导出table布局的表格 <html> <head> <meta charset="utf-8"> <script type=&qu ...

  9. codevs1069关押罪犯（并查集）

    题目描述 Description S 城现有两座监狱,一共关押着N 名罪犯,编号分别为1~N.他们之间的关系自然也极 不和谐.很多罪犯之间甚至积怨已久,如果客观条件具备则随时可能爆发冲突.我们用“怨 ...

  10. IntelliJ IDEA中类似Eclipse自动补全变量名称和属性名称的快捷键

    IntelliJ IDEA 默认快捷键模式下 自动补全变量名称 : Ctrl + Alt + v 自动补全属性名称 : Ctrl + Alt + f