1、如果我们给父元素添加opacity:0.4后，子元素的red颜色也变成了0.4的透明度， 
例子如下：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>透明度写法</title>

        <style type="text/css">

            *{

                margin:0;

                padding:0;

            }

            .wrap{

                margin:200px auto;

                width:200px;

                height:200px;

                background:black;

                opacity:0.4;

                position:relative;

            }

            .inner{

                position:absolute;

                width:100px;

                height:100px;

                background:red;

                top:50%;

                left:50%;

                margin:-50px 0 0 -50px;

            } 

        </style>

    </head>

    <body>

        <div class="wrap">

            <div class="inner"></div>

        </div>

    </body>

</html>

结果： 

**解决方法： 
父元素的透明度用rgba的方法 
background:rgba(0,0,0,0.4);** 
解决的后的代码：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>透明度写法</title>

        <style type="text/css">

            *{

                margin:0;

                padding:0;

            }

            .wrap{

                margin:200px auto;

                width:200px;

                height:200px;

                position:relative;

                background:rgba(0,0,0,0.4);

            }

            .inner{

                position:absolute;

                width:100px;

                height:100px;

                background:red;

                top:50%;

                left:50%;

                margin:-50px 0 0 -50px;

            } 

        </style>

    </head>

    <body>

        <div class="wrap">

            <div class="inner"></div>

        </div>

    </body>

</html>

结果： 

解决方案2：有兼容性问题；

利用CSS中的opacity属性可以实现一些视觉效果，但是父元素设置透明属性会被子元素继承，这是不想见到的，于是通过一些设置解决这个问题。

filter:alpha(opacity=50);

-moz-opacity:0.5;

-khtml-opacity: 0.5;

opacity: 0.5;

解决办法是利用CSS3中的rgba（）进行设置，便不会被被子元素继承，同时为了兼容IE7、IE8等浏览器，需要将子元素的positon属性设置为relative，使其脱离流。

position:relative;

改变父元素的透明度，不影响子元素的透明度—css的更多相关文章

  1. CSS中如何设置父元素透明度不影响子元素透明度

    原因分析: 使用css的opcity属性改变某个元素的透明度,但是其元素下的子元素的透明度也会被改变,即便重定义也没有用,不过有个方法可以实现,大家可以看看. 可以使用一张透明的图片做背景可以达成效果 ...

  2. CSS 设置背景透明度，不影响子元素

    由于 opacity 属性能被子元素继承,使用它设置父元素背景透明度时也会影响子元素． 解决方法: 1> 使用 RGBA Example .classname { /* RGBa, 透明度0.6 ...

  3. 当fixed元素相互嵌套时chrome下父元素会影响子元素的层叠关系

    问题:fixed元素被另一个fixed元素包含的时候在chrome下fixed子元素的定位会受到父元素的影响. demo(http://jsbin.com/qumah/1): <!DOCTYPE ...

  4. 当fixed元素相互嵌套时，父元素会影响子元素的层叠关系，最好不要嵌套使用fixed

    问题:fixed元素被另一个fixed元素包含的时候在chrome下fixed子元素的定位会受到父元素的影响. 解释:层叠关系是受层叠上下文影响的.文档中的层叠上下文由满足以下任意一个条件的元素形成: ...

  5. 父元素高度不确定，子元素左右等高的div布局

    上一篇介绍了实现几个div并排居中点这里,但是指定了高度,这篇文字主要说一下父元素高度不确定,子元素左或右高度不确定且高度相同布局div盒子 三个div盒子如下 <div class=" ...

  6. JAVA读取XML文件并解析获取元素、属性值、子元素信息

    JAVA读取XML文件并解析获取元素.属性值.子元素信息 关键字 XML读取  InputStream   DocumentBuilderFactory   Element     Node 前言 最 ...

  7. 父div的透明度不影响子div透明度

    在设置div的透明度的时候如果设置了父div的透明度(opacity=0.8),那么子div的透明度也随着改变了,并且设置子div的透明度不起作用. 这种情况下可以使用rgba来设置父div的透明度: ...

  8. CSS3 04. 伸缩布局、设置主轴，侧轴方向、主／侧轴对齐方式、 伸缩比例、元素换行、换行控制、覆盖父元素的align-items；控制子元素顺序、web字体、突变字体

    CSS3 在布局方面做了非常大的改进,对块级元素的布局排列变得十分灵活,适应性非常强,其强大的伸缩性,在响应式开发中可以发挥极大的作用.(兼容性不好) 必要元素: 指定一个盒子为伸缩盒子 displa ...

  9. 使用RGBa和Filter实现不影响子元素的CSS透明背景

    点击查看原文 问题 如果我们想要一个元素拥有半透明的背景,我们有两个选择: 使用CSS和 opacity 做一张 24-bit PNG 背景图片 在CSS中使用opacity有两个问题,一是为了适应所 ...

随机推荐

  1. Centos7扩展磁盘空间（LVM管理）

    vmware或hyperv,扩容磁盘,本例中使用的是vmware,关闭系统,在vmware—>设置—>硬盘—>扩展—>输入数字大于当前系统内存—>点击扩展,如图: 1.  ...

  2. spring-mvc注解配置小记

    Controller中注解Service时,Service的实现类需加@Service,dao的实现类需加@Repository. 另:配置文件中对应的包也需要扫描到!!! <context:a ...

  3. Spark数据本地性

    1.文件系统本地性 第一次运行时数据不在内存中,需要从HDFS上取,任务最好运行在数据所在的节点上: 2.内存本地性 第二次运行,数据已经在内存中,所有任务最好运行在该数据所在内存的节点上: 3.LR ...

  4. 用深度学习LSTM炒股：对冲基金案例分析

    英伟达昨天一边发布“全球最大的GPU”,一边经历股价跳水20多美元,到今天发稿时间也没恢复过来.无数同学在后台问文摘菌,要不要抄一波底嘞? 今天用深度学习的序列模型预测股价已经取得了不错的效果,尤其是 ...

  5. 中国Linux开源镜像站大全

    本文来源:各大开源软件.发行版镜像页面.       请注意这是一个总结,如果您自己搭建了一个小型开源镜像,这里并没有.以下列出的是包含大量不同镜像的站点.       具体配置中,我建议您使用大企业 ...

  6. Linux系统下MongoDB的简单安装与基本操作

    这篇文章主要介绍了Linux系统下MongoDB的简单安装与基本操作,需要的朋友可以参考下   Mongo DB ,是目前在IT行业非常流行的一种非关系型数据库(NoSql),其灵活的数据存储方式,备 ...

  7. linux, Django安装MySQL-python==1.2.5报错

    先安装 sudo apt-get install libmysqlclient-dev

  8. SQLSERVER数据库迁移的方法

    数据库迁移两种方案:https://www.cnblogs.com/mcgrady/p/7614491.html 方案一 1,先将源服务器上的数据库文件打包(包括mdf和ldf文件),并且复制到目标服 ...

  9. CSS镂空图片处理

    来源:http://www.zhangxinxu.com/wordpress/?p=5267,分享收藏 使用镂空图片,通过CSS改变颜色,达到图片切换的效果,可以同过背景图,然后改变背景色,从而达到图 ...

  10. XMLTransformProvider

    XMLTransformProvider1 XMLTransformProvider1.TransformRead.SourceXmlDocument := XMLDoc.GetDOMDocument ...