原因分析： 使用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. 如何生成各种mif文件，绝对经典！！！

    mif文件生成模板,只需要5步,很简单!!!!! 先说明如何操作,1-2-3-4-5步,后面附上模板!!! 下面以汉字去模演示过程: 1.取模软件设置:注意这里是设置的输出数据的格式!!!!!!!!! ...

  2. go语言实战 摘抄

    append 函数append会智能地处理底层数组的容量增长.在切片的容量小于1000个元素时,总是会成倍地增加容量.一旦元素个数超过1000,容量的增长因子就会设为1.25, 也就是每次增加25%的 ...

  3. 一篇面试的考题----jQuery

    一.jQuery测试题 下面哪种不是jquery的选择器?(单选)A.基本选择器 B.后代选择器 C.类选择器 D.进一步选择器考点:jquery的选择器 (C) 当DOM加载完成后要执行的函数,下面 ...

  4. 3D Computer Grapihcs Using OpenGL - 12 Rotation Matrix

    为了证明我们上节渲染出来的是一个立方体而不是一个平面,我们决定将它旋转一定角度,这样我们就需要一个旋转矩阵(也属于ModelTransformMatrix的一部分) 上一节我们的ModelTransf ...

  5. 微信小程序支付 java

    原文:https://blog.csdn.net/zhourenfei17/article/details/77765585 话不多说,直接开撸. 支付流程步骤: 1)首先调用wx.login方法获取 ...

  6. Python 代码控制Windows定时关机

    为了在规定时间内实现电脑关机,我使用python编写了几行代码,最简单的实现了关机操作,后续再进行其它功能的添加(操作页面,取消等) import os,time #获取命令行输入的关机时间 inpu ...

  7. MVC3: 页面向服务传参（view->controller，get,post）

    HttpGet HttpPost GetPost 总结比较 ajax get post 1)HttpGet Get是http请求的默认形式.拿MVC官方教程Movie项目举例如下. 编辑页面  Vie ...

  8. 阶段1 语言基础+高级_1-3-Java语言高级_06-File类与IO流_07 缓冲流_5_BufferedWriter_字符缓冲输出流

    使用newLine来换行 同样的效果 println的源码里面其实就用的就是newLine()

  9. 阶段1 语言基础+高级_1-3-Java语言高级_04-集合_05 List集合_3_LinkedList集合

    链表实现,查询慢,增删快 addFirst 集合的开头添加 push等效于addFirst addLast getFirst和getLast clear 清空后 又输出 isEmpty 不为空才去获取 ...

  10. 错误：Only the original thread that created a view hierarchy can touch its views——Handler的使用

    在跟随教程学习到显示web页面的html源码时报错:Only the original thread that created a view hierarchy can touch its views ...