CSS Opacity不会生成颜色叠加?

时间:2014-05-05 02:36:49

标签: css css3 colors overlay alpha

我有一个问题。

我试图在纯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可能有用吗?

1 个答案:

答案 0 :(得分:2)

归功于css-tricks.com

虽然我没有使用CSS 3的经验,但我对绘图在计算机上的工作方式缺乏经验。

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

我查找了一个名为“mix-blend-mode:multiply;”的文章。

但是目前你不会从主流浏览器中找到大量支持。

这是一篇很棒的文章,关于它将如何运作:http://css-tricks.com/basics-css-blend-modes/