关于opacity与rgba的异同

1.问题背景：

UI给了一张这样的图

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

2.问题抛出：

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

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

3.问题解决及总结：

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

采用rgba后达到预期效果

opacity与rgba对比图：

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

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

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

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

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

以上。