注: mix 有混合的意思; blend 也有混合的意思.
multiply 是乘,乘法的意思, 也有正片叠底的意思(将底色与前台色相乘),
我经常问的一个面试题是: “在前端领域,你如何与新技术和API保持同步更新?“ 我听到的大多都是标准答案: “技术博客” 以及 “RSS订阅”, 而很少听到 “关注大牛的Twitter“ 这类答案, 我觉得奇怪, 因为我从Twitter上学习 loads, 尤其是在学习 CSS 的时候, 一两行代码就能优雅地搞定问题。
我听说 mix-blend-mode
这个CSS 属性非常给力。而实际效果也很奇妙, 比想象中还要完美:
本质上, 在图片上使用 mix-blend-mode: multiply;
样式, 会把所有白色的部分转换成半透明的 png。
原文的演示: https://davidwalsh.name/demo/mix-blend-mode.php
可编辑的在线代码演示: http://codepen.io/wesbos/pen/QNONJa
这 CSS 简直不要太完美! 感谢 Wes Bos, 我才知道有这个漂亮的CSS特性! 大神的推特地址为: https://twitter.com/wesbos
翻译人员: 铁锚 http://blog.csdn.net/renfufei
翻译时间: 2016年5月2日
原文时间: 2016年4月13日