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

发布时间:2021-07-30 06:12:55


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

相关文档

  • Linux killall命令:终止特定的一类进程
  • 脚上长茧怎么办?脚上长茧怎么去除
  • 公司领导年终发言稿
  • VMware vSphere 7.0 正式版
  • 2017年秘书部工作计划4篇
  • 《西虹市首富》观后感250字
  • 运算机的主要功能是进行
  • 汽车发动机舱清洗方法大全
  • 股票交易手续费计算
  • 汉墓深埋的富二代:活着要造反 死了要逾制
  • 香港留学商科工程专业延续火热形势
  • 关于网上创业计划书
  • 清明节前后种什么蔬菜合适
  • 牛与马的婚姻是否相配
  • 算法(一):算法复杂度之时间复杂度和空间复杂度
  • 几米的语录
  • 学习情景在生物课堂教学中的创设
  • 最适合天秤座的花是什么花
  • 从阿里巴巴笔试试题看数据分析师的职业要求
  • 商标转让的费用
  • pro缺点和不足 一加7t_一加 7T 上手,目前为止提升最大的 T
  • xml描述uml_使用UML设计XML模式
  • 求职简历范文大全
  • Frida框架在Fuzzing中的应用
  • 雷蛇灯光配置文件_突破极限!Razer雷蛇发布高性能V2版炼狱蝰蛇和巴塞利斯蛇...
  • 2021年年终财务工作总结
  • dts、dtb的那些事儿
  • 播音主持面试自我介绍范文机技巧
  • 中考数学与三角形有关的线段教学视频
  • 铅笔画漫画人物背景绘画图片
  • 猜你喜欢

  • 沈阳鑫汇众科技有限公司(企业信用报告)- 天眼查
  • Linux信号量(3)-内核信号量
  • (云南专版)2届中考历史 基础复习 九年级部分 世界近代史 第十六讲 近代早期期的西欧、欧美主要国家的资产
  • 公共管理专业大学生毕业实习报告范文
  • 构建第一个Spring Boot程序
  • 环境的变化作文
  • 塑木复合材料及其制备加工
  • 增强制造业核心竞争力重点领域关键技术产业化-新型液化天然气船项目资金申请报告(编制大纲)
  • 总结参考-中学政治教师个人工作总结
  • 关于廉政风险防范管理工作的实施意见
  • 分布式存储架构实践
  • 我的家乡西安作文500字
  • 06 AM_12_Chapter 5 四面体网格膨胀
  • NFT数字艺术品热潮下,IPFS或成为其最佳的存储解决方案
  • 年人教版pep六年级英语上册基础复*要点课件
  • 2011年土地市场交易情报
  • 学习小学奥数的原则和方法
  • 秋高中英语 Unit 3 Life in the future Warming up and reading课件 新人教版必修5
  • 天津云台达建材销售有限公司企业信用报告-天眼查
  • 北京郊区农村民俗文化资源开发利用研究_姜凯
  • 初一叙事作文 :心中那一抹绿
  • 支付宝蚂蚁金服股票怎么买?蚂蚁金服股票买入方法
  • 20XX年建筑工程专业大学生实*报告范文
  • 加强石油综合地质录井的管理的有效措施研究
  • 【2018-2019】公司简单辞职报告模板范文-精选word文档 (4页)
  • 洪泽县金谷农业科技服务部企业信用报告-天眼查
  • 冬天换水如何保证水温,冬季怎么换水
  • 高速公路沥青路面的早期破损原因及防护措施
  • 浅谈建筑工程施工项目质量管理措施
  • 新进员工三级安全教育卡
  • 北京博琪网络咨询服务有限公司企业信用报告-天眼查
  • 尿频和肾结石有关系吗?尿频和膀胱有关系吗?
  • 最新规范汉字书写大赛用纸汇编
  • 五年级英语上册 Unit 5 I’m taller than mocky课件2 北师大版(一起)
  • 旧民主革命知识点复习
  • 【2018-2019】停工期间发生的事故是不是生产安全事故-范文模板 (8页)
  • 我国氟化工产业发展回顾与展望
  • 2019年秋季学校工作计划
  • 高中政治_《神奇的货币》精品课件_新人教版必修1
  • 苏教版小学数学六年级下册数学教学计划-精选文档
  • 深圳市诚仁致美生物科技有限公司(企业信用报告)- 天眼查
  • 喷涂项目立项申请书(投资计划)
  • 电脑版