CSS Opacity 透明元素相对不透明
我们知道,要实现这样的效果很容易:
红色的圆圈设置60%的透明度,绿色的圆圈设置60%的透明度。
但是,要实现这样的效果:
或许,你会想到:
- 用取色工具。吸取60%透明度时候的颜色,填充为相同的100%的颜色。
比如,从视觉效果上看:'#46880e' 100% == '#72e217' 60%
,效果都是这样:...
下面主要说明一种不改变透明度的方法。
使两透明元素相对不透明
就拿这个例子来说:
这里所有齿轮的background-color
都是一样的,只有opacity
不一样。
但是,这里的两个齿轮是重叠在一起的,不是想要的结果。
想要的实现效果是这样:
原理
如图,有元素A,元素B,它们从视觉颜色上看是透明的。但是它们不会出现之前那种真的透过去的效果。
是因为,
元素A的透明度设置是0.55,元素B的透明度设置是1,它们之间相对是不透明的。
然后在元素A和元素B的共同父元素C设置透明度0.7。这样,元素A和元素B就从视觉上看是透明的颜色。
多个元素
也可以用同样的道理,如图:
最后,附上一个很好理解的DEMO: