CSS Opacity 透明元素相对不透明

我们知道,要实现这样的效果很容易:

寻常情况

红色的圆圈设置60%的透明度,绿色的圆圈设置60%的透明度。

但是,要实现这样的效果:

特殊情况

或许,你会想到:

  • 用取色工具。吸取60%透明度时候的颜色,填充为相同的100%的颜色。
    比如,从视觉效果上看:'#46880e' 100% == '#72e217' 60%,效果都是这样: 60% or 100% ...

下面主要说明一种不改变透明度的方法。


使两透明元素相对不透明

就拿这个例子来说:

gear

这里所有齿轮的background-color都是一样的,只有opacity不一样。
但是,这里的两个齿轮是重叠在一起的,不是想要的结果。

想要的实现效果是这样:

gear-real


原理

DEMO

如图,有元素A,元素B,它们从视觉颜色上看是透明的。但是它们不会出现之前那种真的透过去的效果。

是因为,
元素A的透明度设置是0.55,元素B的透明度设置是1,它们之间相对是不透明的
然后在元素A和元素B的共同父元素C设置透明度0.7。这样,元素A和元素B就从视觉上看是透明的颜色

多个元素

也可以用同样的道理,如图:

多个元素

最后,附上一个很好理解的DEMO:

麻凯倩

微信:makaiqian