使用元素的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. 我的TDD实践---UnitTest单元测试

    我的TDD实践---UnitTest单元测试 “我的TDD实践”系列之UnitTest单元测试 写在前面: 我的TDD实践这几篇文章主要是围绕测试驱动开发所展开的,其中涵盖了一小部分测试理论,更多的则 ...

  2. 12、Python-网络编程

    1.套接字1.1 socket模块套接字是网络编程中的一个基本组件,一般包括服务器端套接字和客户端套接字. 创建服务器端过程如下: import socket s = socket.socket() ...

  3. memcached 命令操作详解

    memcached 命令操作详解 一.存储命令 存储命令的格式: <command name> <key> <flags> <exptime> < ...

  4. javascript数组、对象和Null的typeof同为object，区分解决办法

    在JS里typeof 大家用的很多,可以使对于数组.对象和Null无法区分的问题,看了看犀牛书还是有解决办法的. document.writeln(typeof "abc"); / ...

  5. Web前端优化需要注意的点

    关键在于:如何提高页面访问速度:如何减少服务器负载和带宽压力: 1.      cache:包括数据库表的缓存,浏览器缓存,服务器端缓存(代理服务器缓存,CDN缓存,反向代理服务器缓存),web应用程 ...

  6. Url以.(点)结尾，在使用httpwebrequest读取的时候,微软会有一个bug……

    解决方法在此,不重复做赘述,传送门:http://stackoverflow.com/questions/856885/httpwebrequest-to-url-with-dot-at-the-en ...

  7. 动态SQL语句：定义（一）

    文章系列 动态SQL语句:定义(一) 静态SQL与动态SQL 静态SQL:程序运行前,具有固定的形式和结构的SQL. 动态SQL:程序运行时,能够动态改变形式或结构的SQL. 一些思考和想法 在实际的 ...

  8. Android第二天

    1.从看得见的活动入手 protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); ...

  9. 《DSP using MATLAB》示例 Example 6.5

    代码: b = [1, 0, 0, 0, 16+1/16, 0, 0, 0, 1]; broots = roots(b) B1 = real(poly([broots(1), broots(2), b ...

  10. URL传值问题，不同浏览器对URL的长度要求

    通过URL传值的问题,所以对url字符串进行encodeURIComponent对url字符串内容进行编码,问题解决,但是有时候会出现 The request filtering module is ...