原因分析: 使用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. luogu P1217 [USACO1.5]回文质数 Prime Palindromes x

    P1217 [USACO1.5]回文质数 Prime Palindromes 题目描述 因为151既是一个质数又是一个回文数(从左到右和从右到左是看一样的),所以 151 是回文质数. 写一个程序来找 ...

  2. [ZJU 1004] Anagrams by Stack

    ZOJ Problem Set - 1004 Anagrams by Stack Time Limit: 2 Seconds      Memory Limit: 65536 KB How can a ...

  3. D1. Kirk and a Binary String (easy version)

    D1. Kirk and a Binary String (easy version) 01串找最长不降子序列 给定字符串s,要求生成一个等长字符串t,使得任意l到r位置的最长不降子序列长度一致 从后 ...

  4. Oracle--利用监听器日志监控访问该数据库的客户端IP

    服务器10.10.10.168  数据库seineebs 客户端 10.10.10.14  用户guipeng.zhang 查看监听器状态: 在本机利用PL/SQL工具连接该数据库 查看监听器日志:一 ...

  5. SpringBoot:初识SpringBoot

    西部开源-秦疆老师:基于SpringBoot 2.1.6 的博客教程 秦老师交流Q群号: 664386224 未授权禁止转载!编辑不易 , 转发请注明出处!防君子不防小人,共勉! 1.SpringBo ...

  6. Android手机fastboot 刷机命令【转】

    本文转载自:http://luke-feng.iteye.com/blog/2171090 简介:在安卓手机中fastboot是一种比recovery更底层的模式.fastboot是一种线刷,就是使用 ...

  7. 移动端调试 — iPhone +Safari

    1   开启iOS设备的调试功能 打开“设置”程序,进入“Safari”->“高级”页面开启“Web检查器”: 2   mac safari浏览器设置开发者工具 safari ->偏好设置 ...

  8. c# Task waitAll,WhenAll

    wait 阻塞的 when是异步的非阻塞的. Task[] tlist = new Task[] { Task.Run(() => { Thread.Sleep(3000); }), Task. ...

  9. 十九、python内置函数汇总

    '''内置函数abs():取绝对值all():每个元素都为真,才是真any():有一个元素为真即为真bin():十进制转二进制hex():十进制转十六进制int():所有的转成十进制oct():十进制 ...

  10. Html.Partial和Html.RenderPartial和Html.RenderAction区别

    1.Html.Partical 把View页或模板解析成字符串然后输出到渲染页面上 @Html.Partical("viewxxx") 2.Html.RenderPartical则 ...