mix-blend-mode

发表于2022-11-16|更新于2026-02-24

|浏览量:

为爱情赌气，就丧心病狂了！——塞万提斯

分享一个好玩的css属性：

mix-blend-mode，MDN

该属性可以将元素和后面的背景进行混合

什么叫混合呢？例如我看到的一个网站：

红框框出来的部分，是鼠标移动上去的一个效果

这个小圈，与后面的图片进行了反色，而且对于不少图片都有类似效果，我一开始以为是用了两张图片做的处理

后来发现并不是，是用的这个css

1	mix-blend-mode: exclusion;

其提供的不只是反色一个选项，还有很多的值，都可以使用

相关推荐

生如夏花之绚烂，死如秋叶之静美。——泰戈尔《生如夏花》分享一个微前端框架乾坤：https://qiankun.umijs.org/zh github：https://github.com/umijs/qiankun 快速开始：https://qiankun.umijs.org/zh/guide/getting-started 快速上手主应用1. 安装 qiankun1$ yarn add qiankun # 或者 npm i qiankun -S 2. 在主应用中注册微应用123import { registerMicroApps, start } from 'qiankun';registerMicroApps([ { name: 'react app', // app name registered entry: '//localhost:7100', container: '#yourContainer', activeRule...

id长度太长的坑

今天写代码发现返回给前端的id，前端拿到后最后两位归零了。。。 11275821421230030848 本来是这么一串id，到了前端那边变成了 11275821421230030800 最后，只好用toString，然后把对象转换成map，返回给前端…

Arco Design Pro

旧书不厌百回读，熟读深思子自知——苏轼分享一个开箱即用的中后台前端解决方案 https://github.com/arco-design/arco-design-pro-vue

JS的线程模型和事件循环机制

生命不是安排，而是追求。——弗吉尼亚·伍尔芙从线程和浏览器底层执行的角度来看，JavaScript 的延迟/休眠功能是如何实现的呢？线程模型和事件循环JavaScript 的执行环境（如浏览器或 Node.js）是单线程的，这意味着在任何给定的时间点，只有一个线程在执行 JavaScript 代码。为了管理并发操作，JavaScript 依赖于事件循环（Event Loop）。事件循环事件循环是一个不断检查和处理消息队列的机制。它会执行以下步骤：检查调用栈（Call Stack），如果调用栈为空，则继续。检查消息队列（Message Queue），如果消息队列中有待处理的任务，则取出队首的任务并执行。重复以上步骤。宏任务和微任务在事件循环中，有两种类型的任务：宏任务（Macro Task）和微任务（Micro Task）。宏任务：包括整体脚本执行、setTimeout、setInterval、setImmediate（Node.js）等。微任务：包括 Promise 的回调、process.nextTick（Node.js）、Mutation...

Apache-ShenYu支持namespace功能

健康的身体是灵魂的客厅，病弱的身体是灵魂的监狱。——培根我主要完成前端部分对接，pr如下： https://github.com/apache/shenyu-dashboard/pull/462 这里主要是结合redux-saga完成需求，例如modal/global.js shenyu-dashboard/src/models/global.js at 624a2afe74367b5c5a310627197d3622a8c896a4 · apache/shenyu-dashboard · GitHub 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109...

for of和for in

人生而自由，却无往不在枷锁中——卢梭《社会契约论》我之前写过一篇for in的博客 for in是遍历对象key或者数组下标前端还可以使用for of来遍历value 简单写一下两者区别和使用方式吧： 12let ruben = {name:'ruben', age:21}for(key in ruben) console.log(key) 然后是for of 提示对象并不是iterable(可迭代的) 因此for of并不能遍历对象的key 接下来看数组的： 12let list = [1,2,3,4,5,6]for(i in list) console.log(i) 可以看到是遍历获取出了下标并不是实际的值而for of： 12let list = [1,2,3,4,5,6]for(i of list) console.log(i) 遍历出了我们的value

阿超

我的名字叫阿超年龄25岁家在北京市职业是软件开发每天最晚也会在八点前回家不抽烟酒浅尝辄止晚上十二点上床保证睡足八个小时睡前写一篇博客再做二十分钟俯卧撑暖身然后再睡觉基本能熟睡到天亮像婴儿一样不留下任何疲劳和压力就这样迎来第二天的早晨健康检查结果也显示我很正常我想说明我是一个不论何时都追求内心平稳的人不拘泥于胜负不纠结于烦恼不树立使我夜不能寐的敌人这就是我在这社会的生活态度

数据加载中