CSS Opacity 不生成颜色叠加层？

Question

我有一个问题。

我正在尝试用纯 CSS 重新创建这个 gif: http://i.imgur.com/VrV57jC.gif

所以，这是代码示例

http://jsfiddle.net/E4WMh/

border-color: rgba(x, x, x, .333); /* Reduce the opacity to 33.3% to overlay others layers. */

颜色不叠加以创建白色纯色，只是顶层叠加到底层并加入纯色。

那么，是否可以叠加颜色以获得相同的效果(photoshop 中的“叠加”效果)？

也许 -webkit-filter 会有用？

Answer 1

归功于 css-tricks.com

虽然我没有使用 CSS 3 的经验，但我对如何在计算机上绘图几乎没有经验。

您正在寻找一种改变混合模式在 css 中工作方式的方法。

我查找了一个叫做“mix-blend-mode: multiply;”的东西

但目前您不会从主要浏览器中找到大量支持。

这是一篇关于这一切(将)如何运作的好文章:http://css-tricks.com/basics-css-blend-modes/