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

目录
相关文章
|
3月前
|
前端开发 JavaScript 开发者
探索Web设计新纪元:CSS3的革新特性如何重塑我们的网页视觉体验?
【8月更文挑战第26天】随着Web技术的发展,CSS3为前端开发带来了众多激动人心的新特性,极大提升了网页设计的视觉效果与创意空间。本文通过对比CSS3与CSS2,详细介绍了CSS3在选择器增强、圆角阴影处理、渐变背景应用、转换动画实现、文字效果优化、媒体查询支持及多列布局方面的显著改进,展示了CSS3如何助力开发者打造更具吸引力和互动性的网页体验。
50 1
|
2月前
|
前端开发
【前端web入门第四天】02 CSS三大特性+背景图
本文详细介绍了CSS的三大特性:继承性、层叠性和优先级,并深入讲解了背景图的相关属性,包括背景属性、背景图的平铺方式、位置设定、缩放、固定以及复合属性。其中,继承性指子元素自动继承父元素的文字控制属性;层叠性指相同属性后定义覆盖前定义,不同属性可叠加;优先级涉及选择器权重,包括行内样式、ID选择器等。背景图部分则通过具体示例展示了如何设置背景图像的位置、大小及固定方式等。
253 91
|
6月前
|
机器学习/深度学习 移动开发 前端开发
CSS3 新特性
CSS3 新特性
69 0
|
3月前
|
前端开发 JavaScript API
Vue 3 新特性:在 Composition API 中使用 CSS Modules
Vue 3 新特性:在 Composition API 中使用 CSS Modules
|
4月前
|
前端开发
前端 CSS 经典:mix-blend-mode 属性
前端 CSS 经典:mix-blend-mode 属性
31 0
|
6月前
|
前端开发 JavaScript 开发者
CSS3作为CSS的最新版本,引入了许多强大的新特性和改进
【5月更文挑战第26天】CSS3作为CSS的最新版本,引入了许多强大的新特性和改进
61 2
|
5月前
|
前端开发
番外篇-CSS3新增特性
番外篇-CSS3新增特性
31 0
|
6月前
|
前端开发 UED
【专栏:CSS 进阶篇】CSS3 新特性:过渡、动画与变形
【4月更文挑战第30天】CSS3的过渡、动画和变形三大特性为网页设计注入活力,创造生动丰富的用户体验。过渡提供平滑效果,常用于按钮点击等;动画实现复杂动态效果,适用于滚动字幕等;变形允许元素几何变换,如旋转和缩放。实际应用包括动态导航菜单、图片轮播和加载动画。然而,需注意浏览器兼容性、性能优化和设计平衡。掌握这些特性,将为网页设计带来更多创新可能。
150 1
|
6月前
|
前端开发 JavaScript 开发者
【Web 前端】css3的新特性有哪些?
【4月更文挑战第22天】【Web 前端】css3的新特性有哪些?
|
6月前
|
前端开发 容器
CSS面试考点:隐藏元素、BFC、垂直居中、CSS3新特性
【4月更文挑战第2天】 CSS面试考点:隐藏元素、BFC、垂直居中、CSS3新特性
51 10