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: