使用元素的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. WCF 学习笔记之双工实现

    WCF 学习笔记之双工实现 其中 Client 和Service为控制台程序 Service.Interface为类库 首先了解契约Interface两个接口 using System.Service ...

  2. 由自动装箱和拆箱引发我看Integer源码

    背景和问题 在看别人整理的资料时,看到如下一段代码: package com.sitech.test; /** * 自动装箱和拆箱 jdk1.6 * @author liaowp * */ publi ...

  3. js动画（一）

    终于放寒假了,哈哈哈,然后,也不准备闲着吧,就是再熟悉一下旧的东西,然后把新的东西也拿来分享一下,自己也准备好了再这个寒假 好好的提高一下自己,哎,菜鸟一枚,真正去实战了,发现自己手上的武器太少了,所 ...

  4. C++中的结构体vector排序

    在包含了头文件#include <algorithm>之后,就可以直接利用sort函数对一个vector进行排序了: // sort algorithm example #include ...

  5. printf输出格式

    tips:#为空格                                   Printf 格式化字符串  格式代码 A ABC ABCDEFGH %S A ABC ABCDEFGH %5S ...

  6. CSS3的radial-gradient(径向渐变)

    所谓径向渐变,如图下,类似光晕 语法: radial-gradient(  [    [渐变大小]?    [ at 渐变圆心坐标]?  ,]?  颜色[ 开始位置]  [,颜色[ 开始位置]]+); ...

  7. Object-Widgets-Quick 构造树

    Object Tree 当以某个QObject为父类创建一个QObject时, 它会被添加到该父类的children列表中. 析构时, QObjet 会首先检查自己的children, 依次析构, 然 ...

  8. 想入门webpack，这篇就够了

    申明:本文转载自简书 文/zhangwang(简书作者)原文链接:http://www.jianshu.com/p/42e11515c10f#著作权归作者所有,转载请联系作者获得授权,并标注" ...

  9. CoreJavaE10V1P3.9 第3章 Java的基本编程结构－3.9 大数值（Big Numbers）

    如果基本的整型与浮点型不能满足需求,可以使用java.Math包提供的 BigInteger 和 BigDecimal 两个类,这两个类可以存储任意长度的数, BigInteger 实现的任意精度整数 ...

  10. 关于++i和i++

    这个东西我忘了好几次了,啊啊啊,难道是没真正理解吗<script> window.onload=function(){ var i=0; var a=++i; alert(a); }< ...