使用元素的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. hdu4277 USACO ORZ

    USACO ORZ Time Limit: 5000/1500 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total Sub ...

  2. 关于给予webApp框架的开发工具

    webApp 1.phonegap webApp即基于html+css+javascript,对于新手会联想好多及疑问(如数据的添删查修如何实现,参数传递如何实现) 添加查修使用jsonp跨域实现的 ...

  3. NCache：最新发布的.NET平台分布式缓存系统

    NCache:最新发布的.NET平台分布式缓存系统在等待Microsoft完成Velocity这个.NET平台下的分布式内存缓存系统的过程中,现在让我们将目光暂时投向其他已经有所建树的软件开发商.Al ...

  4. android动画特效之解决解决移动后闪烁现象，解决输入法弹出后位置回复原状，解决两个动画叠加

    以下代码实现的效果是: BoundOpenView从居中移动到顶部,移动完后,BoundSendView从隐藏变为显示,并从顶部移动BoundOpenView下方20dp处,同时透明度慢慢增加. pr ...

  5. continue与break

    1.continue语句,1至20内奇数累加和 #include<iostream> using namespace std; void main(){ int i=0; int sum= ...

  6. [置顶] 使用严苛模式打破Android4.0以上平台应用中UI主线程的“独断专行”

    传送门 ☞ 轮子的专栏 ☞ 转载请注明 ☞ http://blog.csdn.net/leverage_1229 已经有好一段时间没有关注Android应用方面的事情了:)最近单位来了一个Androi ...

  7. Android 开发环境 —— Eclipse 启动时报错：Error when loading the SDK

    简述: Eclipse 启动时报错:Error when loading the SDK 错误信息: Error when loading the SDK: Error: Error parsing  ...

  8. Python自学笔记——Matplotlib风羽自定义

    [前言]对于气象专业的小学生来说,风场是预报重要的参考数据,我们所知的风羽有四种:短线代表风速2m/s,长线代表风速4m/s,空心三角代表风速20m/s,实心三角代表风速50m/s.而matplotl ...

  9. ASP.NET MVC with Entity Framework and CSS一书翻译系列文章之第五章：排序、分页和路由

    本章的重点是对产品信息增加排序和分页的功能,以及使用ASP.NET Routing特性添加更加友好的URL支持. 注意:如果你想按照本章的代码编写示例,你必须完成第四章或者直接从www.apress. ...

  10. BST 二叉搜索树

    定义: 二叉查找树要么是一棵空树,要么是一棵具有如下性质的非空二叉树:      1.若左子树非空,则左子树上的所有结点的关键字值均小于根结点的关键字值.      2.若右子树非空,则右子树上的所有 ...