RN设置透明度bug,子标签继承父标签的透明度

问题描述
    RN中给一个View设置一个不透明度opacity,然后其包含的子View全部都有了这个opacity,那我们的需求肯定不是这样,可能需要单独设置各自的opacity或者说子View不需要,那么该如何解决?

解决方案

    使用#RRGGBBAA或者rgba(xx,xx,xx,xx)这种格式来设置透明度,而不是使用数字属性设置。

opacity:0.6;✘

opacit:rgba(5,49,125,0.6);✔
比如:一个背景颜色为rgb(5,49,125),opacity=0.6,我们就可以使用rgba(5,49,125,0.6)或者#05317D99,其中99对应的是透明度0.6的十六进制。
关于透明度转换为对应的十六进制,可以参照这篇文章:https://www.jianshu.com/p/757ed62e6a16

分析
    为什么设置oapcity,子View会继承,而设置rgba就避免了这个问题?说到底还是对opacity属性和alpha通道不太了解。我在查阅了一些资料之后发现:在CSS3.0之前,在样式中指定的颜色值只能为RGB颜色值,并且只能通过opacity属性来设置元素的透明度。CSS3.0开始增加了3种颜色值:RGBA,HSL和HSLA,并且允许通过对RGBA颜色值和HSLA颜色值设定alpha通道的方法来更加容易地实现透明度的变化。

opacity属性
    规定不透明度的级别。从 0.0 (完全透明)到 1.0(完全不透明)。会从父元素继承 opacity 属性的值。
alpha通道
    设置元素的透明度。从 0.0 (完全透明)到 1.0(完全不透明)。 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值