使用元素的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. CSS 实现的各种球体效果

    CSS 实现的各种球体效果[附在线演示] CSS 可以实现很多你想不到的效果,今天我们来尝试使用 CSS 实现各种球体效果.有两种方法可以实现,第一种是使用大量的元素创建实际的 3D 球体,这种方法有 ...

  2. .net基础收集

    .net基础收集 最近的面试让我知道基础知识的重要性,而我也每天都在网上找一些基础题来看.其实面试无非都是一些理论基础,只有基础过关了,才会被问到技术性的问题,所以第一关一定要打好.下面是我收集的一些 ...

  3. Google论文之三----MapReduce

    Google论文之三----MapReduce MapReduce:大型集群上的简单数据处理 摘要 MapReduce是一个设计模型,也是一个处理和产生海量数据的一个相关实现.用户指定一个用于处理一个 ...

  4. wordpress开启用户注册

    很多人想用wordpress打造多用户博客平台 首先想到的是用户注册 今天搞了好长时间,找了好多资料总算找到了 首先开启用户注册 后台 ----设置----常规设置  在成员资格选项中选择任何人都可以 ...

  5. Shell 获取当前执行脚本的路径

    filepath=$(cd "$(dirname "$0")"; pwd) 脚本文件的绝对路径存在了环境变量filepath中,可以用 echo $filepa ...

  6. 趋势：Chrome为打包应用提供强大新特性

    Chrome 7月9日刚为Chrome打包的应用提供了强大的访问Google服务例如Google统计.GoogleAPI和Google 钱包的能力,除此之外,还能够使用系统层面的服务包括蓝牙和原生应用 ...

  7. the selected server is enabled,but is not configured properly.Deployment to it will not be permitted

    用Tomcat添加部署项目的时候报错: the selected server is enabled,but is not configured properly.Deployment to it w ...

  8. 【CSS学习笔记】关于有语义标签

    1.哪些是单闭合标签,哪些是双闭合标签? HTML的单闭合标签有: 1.<br /> 2.<hr /> 3.<area /> 4.<base /> 5. ...

  9. SQL注入(三)

    邮给我一个密码 我们意识到虽然不能添加一条新的记录在members表中,但我们可以通过修改一个存在的记录, 这也获得了我们的证明是可行的. 从先前的步骤中,我们知道bob@example.com在系统 ...

  10. 数据结构之Binary Search Tree (Java)

    二叉查找树简介 二叉查找树(Binary Search Tree), 也成二叉搜索树.有序二叉树(ordered binary tree).排序二叉树(sorted binary tree), 是指一 ...