关于opacity与rgba的异同

1.问题背景:


UI给了一张这样的图

大概需求是:list需要隔行变色,标注的背景颜色是#000透明度是0.05

2.问题抛出:

按照拿到的设计图,设置好背景,结果得到如下:文字跟着透明度和颜色融入到背景里了,导致看不到文字

明明是照着设计图设置的背景,为什么会看不到文字了呢?

3.问题解决及总结:

一番探索之后,发现原因在于opacity这个属性,它的设置是会对整个元素进行设置,若要达到设计图中的效果,需要采用rgba:


采用rgba后达到预期效果

opacity与rgba对比图:


opacity针对整个元素,而rgba只针对背景,不影响文字

总结:虽然是个小问题,但项目中很可能会遇到,如果没有一些经验,很可能会觉得奇怪且不知所措。

作为前端开发,可能没有后端或者运维那么多数据和逻辑层面的难题,而更多的是这些琐碎奇怪的小问题,解决这些问题的过程,也是一种提升。

而一个技术大牛,在成为大牛之前,他的技术能力与技术信心,也是随着一个个问题的解决而得以提升的。

多总结,多提高,逐渐成长。

以上。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1、属性选择器:id选择器 # 通过id 来选择类名选择器 . 通过类名来选择属性选择器 ...
    Yuann阅读 1,680评论 0 7
  • 题目:口才方面的“渔王” 关键词:渔王 手把手教 少走弯路 教训 统计:总结10分钟,120分钟练习30遍, 练习...
    008一字千金537践行思想阅读 206评论 0 0
  • 最近感冒君来访,整个人都恹恹的。咳嗽咳不停,心肝肺都要咳出来,说话近乎歇斯底里公鸭嗓,我自己听着都会被吓一跳的既视...
    水清浅阅读 608评论 0 0
  • 写在列车上的抒情诗 ■巴山雪儿 1 行走那乡...
    巴山雪儿阅读 332评论 0 7
  • 逛菜场是大爷、大妈、家庭主妇的专利,不过近两年我也爱上了逛菜场,尤爱逛那种大型菜市场。逛大型菜市场真是一种言...
    帕客阅读 254评论 0 0