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

简介: 注: mix 有混合的意思; blend 也有混合的意思. multiply 是乘,乘法的意思, 也有正片叠底的意思(将底色与前台色相乘),我经常问的一个面试题是: “在前端领域,你如何与新技术和API保持同步更新?“ 我听到的大多都是标准答案: “技术博客” 以及 “RSS订阅”, 而很少听到 “关注大牛的Twitter“ 这类答案, 我觉得奇怪, 因为我从Twitter上学习 loads, 尤其是在学习 CSS 的时候, 一两行代码就能优雅地搞定问题。

注: 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日

原文链接: https://davidwalsh.name/mix-blend-mode

目录
相关文章
|
7月前
|
Web App开发 前端开发 容器
CSS进阶: 选择器进阶、背景相关属性、元素显示模式、CSS特性
CSS进阶: 选择器进阶、背景相关属性、元素显示模式、CSS特性
104 1
|
22天前
|
人工智能 前端开发 JavaScript
【前端设计】HTML+CSS+JavaScript基本特性
【前端设计】HTML+CSS+JavaScript基本特性
|
1月前
|
编解码 前端开发 搜索推荐
CSS3的新特性
CSS3是 CSS(层叠样式表)的最新版本,它在CSS2.1的基础上增加和改进了许多新的特性
|
3月前
|
编解码 前端开发 JavaScript
更灵活的CSS3新特性:帮你简化样式管理和优化网站性能(三)
更灵活的CSS3新特性:帮你简化样式管理和优化网站性能
|
3月前
|
前端开发 开发者 容器
更灵活的CSS3新特性:帮你简化样式管理和优化网站性能(二)
更灵活的CSS3新特性:帮你简化样式管理和优化网站性能
|
3月前
|
移动开发 前端开发 开发者
更灵活的CSS3新特性:帮你简化样式管理和优化网站性能(一)
更灵活的CSS3新特性:帮你简化样式管理和优化网站性能
|
3月前
|
前端开发 UED 开发者
面试题:css3新增的特性
面试题:css3新增的特性
13 0
|
4月前
|
前端开发 容器
CSS3新增了哪些新特性?
CSS3新增了哪些新特性?
38 0
|
9月前
|
前端开发 UED 开发者
CSS3新增特性
CSS3是CSS技术的最新版本,相比CSS2增加了许多新的特性,以下是CSS3新增的一些特性:
|
9月前
|
Web App开发 编解码 前端开发
CSS标准(1)-特性和值
CSS标准(1)-特性和值
72 0