UI给了一张这样的图
大概需求是：list需要隔行变色，标注的背景颜色是#000，透明度是0.05
按照拿到的设计图，设置好背景，结果得到如下：文字跟着透明度和颜色融入到背景里了，导致看不到文字
明明是照着设计图设置的背景，为什么会看不到文字了呢？
一番探索之后，发现原因在于opacity这个属性，它的设置是会对整个元素进行设置，若要达到设计图中的效果，需要采用rgba：
采用rgba后达到预期效果
opacity与rgba对比图：
opacity针对整个元素，而rgba只针对背景，不影响文字
总结：虽然是个小问题，但项目中很可能会遇到，如果没有一些经验，很可能会觉得奇怪且不知所措。
作为前端开发，可能没有后端或者运维那么多数据和逻辑层面的难题，而更多的是这些琐碎奇怪的小问题，解决这些问题的过程，也是一种提升。
而一个技术大牛，在成为大牛之前，他的技术能力与技术信心，也是随着一个个问题的解决而得以提升的。
多总结，多提高，逐渐成长。
以上。
1.问题背景： 大概需求是：list需要隔行变色，标注的背景颜色是#000，透明度是0.05 2.问题抛出： 按照...
关于透明度属性区别 rgba()和opacity的透明效果有什么不同？ rgba()和opacity都能实现透明效...
关于颜色透明度，rgba background:transparent;---纯透明 opacity，filter...
1、opacity与RGBA 对元素进行透明度的设置时，经常用到的有opacity与background -col...
background的属性没有继承性 字体颜色有继承性 opacity 有继承性
30.rgba和opacity的区别？ （1）rgba和opacity都能实现透明效果，但最大的不同在于opaci...
颜色定义： opacity 透明度的属性 rgba（）和opacity都能实现透明效果但是opacity是...
前言 sdkfh shdhfk rgba与opacity的区别，其实说了无数次了，但是我自己在重复一次吧，多多益善...
opacity会继承父元素的opacity 属性，而RGBA设置的元素的后代元素不会继承不透明属性。简单来说就是o...
rgba opacity 他们的区别是什么呢? 有opacity属性的所有后代元素都会继承 opacity 属性，...
本文标题：关于opacity与rgba的异同
本文链接：https://www.haomeiwen.com/subject/dmrkbftx.html
网友评论