0
点赞
收藏
分享

微信扫一扫

CSS3新特性: mix-blend-mode: multiply



注: mix 有混合的意思; blend 也有混合的意思.

multiply 是乘,乘法的意思, 也有正片叠底的意思(将底色与前台色相乘),


我经常问的一个面试题是: “在前端领域,你如何与新技术和API保持同步更新?“ 我听到的大多都是标准答案: “技术博客” 以及 “RSS订阅”, 而很少听到 “关注大牛的Twitter“ 这类答案, 我觉得奇怪, 因为我从Twitter上学习 ​loads​, 尤其是在学习 CSS 的时候, 一两行代码就能优雅地搞定问题。

我听说 ​​mix-blend-mode​​ 这个CSS 属性非常给力。而实际效果也很奇妙, 比想象中还要完美:

CSS3新特性: mix-blend-mode: multiply_multiply

本质上, 在图片上使用 ​​mix-blend-mode: multiply;​​ 样式, 会把所有白色的部分转换成半透明的 png。

可编辑的在线代码演示: ​​http://codepen.io/wesbos/pen/QNONJa​​

这 CSS 简直不要太完美! 感谢 Wes Bos, 我才知道有这个漂亮的CSS特性! 大神的推特地址为: ​​https://twitter.com/wesbos​​


翻译时间: 2016年5月2日



举报

相关推荐

CSS3 新特性

CSS3新特性

CSS3的新特性

css3的新特性

【Web前端】CSS3新特性

css3的新特性有哪些?

CSS3新特性transition的使用

0 条评论