美文网首页
关于opacity与rgba的异同

关于opacity与rgba的异同

作者: 南宫__ | 来源:发表于2018-08-10 15:27 被阅读0次

    1.问题背景:

    UI给了一张这样的图

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

    2.问题抛出:

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

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

    3.问题解决及总结:

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

    采用rgba后达到预期效果

    opacity与rgba对比图:

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

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

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

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

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

    以上。

    相关文章

      网友评论

          本文标题:关于opacity与rgba的异同

          本文链接:https://www.haomeiwen.com/subject/dmrkbftx.html