原因分析: 使用css的opcity属性改变某个元素的透明度,但是其元素下的子元素的透明度也会被改变,即便重定义也没有用,不过有个方法可以实现,大家可以看看。

可以使用一张透明的图片做背景可以达成效果,但是有没有更简单的方法呢?使用 RGBA
例如:

设置父元素opacity:0.5,子元素不设置opacity,子元素会受到父元素opacity的影响,也会有0.5的透明度。

即使设置子元素opacity:1,子元素的opacity:1也是在父元素的opacity:0.5的基础上设置的,因此子元素的opacity还是0.5。

解决方法:为父元素设置background: rgba(0,0,0,0.5)。

CSS中如何设置父元素透明度不影响子元素透明度的更多相关文章

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

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

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

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

  3. 父元素高度设置为min-height,子元素高度设置为100%,但实际上子元素高度你知道是多少吗?

    前言 给父元素一个min-height,子元素设置height:100%. 代码 <!DOCTYPE html> <html> <head> <title&g ...

  4. LinearLayout的gravity属性以及其子元素的layout_gravity何时有效;RelativeLayout如何调整其子元素位置只能用子元素中的属性来控制,用RelativeLayout中的gravity无法控制!!!

    LinearLayout的gravity属性以及其子元素的layout_gravity何时有效:RelativeLayout如何调整其子元素位置只能用子元素中的属性来控制,用RelativeLayou ...

  5. 二、vue学习--父元素如何获取子元素的值,子元素如何获取父元素的值

      下图是父元素: 下图是子元素,获取父元素的值,使用props定义属性,这样就可以获取到父元素上传过来的set .place.type,拿到值就可以做一些自己的逻辑处理 二.子元素给父元素传值? 下 ...

  6. js将数组中一个或多个字段相同的子元素中合并

    最近js中遇到js将数组中一个或多个字段相同的子元素中合并,相信很多朋友也有遇到,大家可能有多种方法,我在这里记录一个相对简单的方法,当然大家如有其它更好的方法,请提出来大家共同学习. //将经济事项 ...

  7. 改变父元素的透明度,不影响子元素的透明度—css

    1.如果我们给父元素添加opacity:0.4后,子元素的red颜色也变成了0.4的透明度, 例子如下: <!DOCTYPE html> <html> <head> ...

  8. CSS中怎么设置元素水平垂直居中?

    记录怎么使用text-align与vertical-align属性设置元素在容器中垂直居中对齐.text-align与vertical-align虽然都是设置元素内部对齐方式的,但两者的用法还是有略微 ...

  9. CSS中父元素高度没有随子元素高度的改变而改变,应该如何解决?

    如果子元素没有设置浮动(float),父元素实际上会根据内容,自动宽高进行适应的. 当子元素增加了浮动后,最简单的处理方法是给父元素添加overflow:hidden属性,此时父元素的高度会随子元素的 ...

随机推荐

  1. spring mvc 绑定参数据默认值,是否必传,(RequestParam(value="id",defaultValue="1",required=true) )

    @RequestMapping(value = "/detail", method = RequestMethod.GET) public String newDetail(@Re ...

  2. Oracle Fetch子句

    Oracle Fetch子句 作者:初生不惑 Oracle基础 评论:0 条 Oracle技术QQ群:175248146 在本教程中,将学习如何使用Oracle FETCH子句来限制查询返回的行数. ...

  3. 170815-关于Filter的知识点

    Filter简介:         Filter翻译为中文是过滤器的意思.         Filter是JavaWeb的三大web组件之一:Servlet.Filter.Listener       ...

  4. es之java操作插入文档

    4方式: . 使用json字符串直接创建 . 使用Map集合 . 使用第三方库来序列化 createDocumentBySerialize . 使用内置的帮助器XContentFactory.json ...

  5. Oracle诊断:在程序的运行中,有时候数据库会断开连接

    在程序的运行中,有时候数据库会断开连接,然后报下面错误: ORA-12519: TNS:no appropriate service handler found  可用的服务处理程序没有找到. 1. ...

  6. ASM磁盘组删除磁盘

    ASM磁盘组删除磁盘 [oracle@dbserver1 ~]$ su - gridsqlplus / as sysasmConnected.SQL> alter diskgroup data ...

  7. uid auid euid的区别

    关于euid suid guid,参考这篇很好的文章 uid auid euid的区别? initially: 最初地, 一开始地 jackson had initially bloodied his ...

  8. PriorityBlockingQueue 源码分析

    PriorityBlockingQueue PriorityBlockingQueue 能解决什么问题?什么时候使用 PriorityBlockingQueue? 1)PriorityBlocking ...

  9. Vue知识整理2:Vue生命周期方法

    在vue执行过程中,可以分为beforeCreate.created.BeforeMount.mounted  .BeforeUpdate.updated 等常用的方法,如下图所示. 除此之外,通过查 ...

  10. SpringBoot系列:二、SpringBoot的配置文件

    SpringBoot的配置文件在resources文件夹下 springboot的配置文件支持两种形式的写法,一种是经典的properties另一种是yml yml通过空格缩进的形式来表示对象的层级关 ...