mix-blend-mode

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

|浏览量:

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

分享一个好玩的css属性：

mix-blend-mode，MDN

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

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

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

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

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

1	mix-blend-mode: exclusion;

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

相关推荐

只要我们能善用时间，就永远不愁时间不够用。——德国诗人歌德 Page Agent JavaScript in-page GUI agent. Control web interfaces with natural language. 他是谁：住在网页里的 GUI AgentPage Agent 有点像那种“已经在你页面里租好房子”的小助手——不是浏览器扩展那种住隔壁的，也不是 python 脚本那种在远方给你打电话的，更不是 headless browser 那种披着隐身斗篷在后台乱窜的。他是那种会直接站在你的网页里，理一理领带，拍拍胸口说： The GUI Agent Living in Your Webpage. Control web interfaces with natural language. 你对他说一句人话，他就替你把网页界面“按按钮、填表单、点链接、做流程”这类事儿办得明明白白。他甚至还准备了几个入口，像是在门口举牌指路： 👉 🚀 Demo👉 📖 Documentation👉 📢 Join HN Discussion...

ts装饰器(注解)

书，能保持我们的童心；书能保持我们的青春。——严文井官方文档：https://www.typescriptlang.org/docs/handbook/decorators.html 这个东西在java里叫注解，不过在ts中，一个装饰器对应一个方法首先执行命令： 1tsc --target ES5 --experimentalDecorators 然后配置一下tsconfig.json就可以使用了 123456{ "compilerOptions": { "target": "ES5", "experimentalDecorators": true }} 首先我们定义一个class 1234class User { private id: Number | undefined; private name: string | undefined;} 我们编写一个装饰器对应的逻辑，实现ja...

学习必须与实干相结合。——泰戈尔 Kordoc：让韩文办公文档不再困在格式里项目地址：https://github.com/chrisryugj/kordoc 在很多办公场景中，文档并不只是文字的容器。它可能是一份层级严密的计划书，一张合并单元格密布的表格，一份带有复杂格式的行政公文，一份需要填写姓名、地址、日期与审批信息的申请表，也可能是一份扫描件、老旧 HWP 文件，或等待比对修订痕迹的新旧版本材料。这些文档往往有一个共同问题：内容明明就在里面，却不容易被程序真正理解。 Kordoc 选择直面这片复杂地带。它是一套面向 HWP、HWPX、PDF、Office 文档与图像的文档处理工具，能够将内容转换为 Markdown 和结构化数据，并提供文档比较、表单填充、HWPX 生成、格式保留编辑、渲染预览、OCR、隐私信息遮盖与 MCP 工具调用能力。它的目标并不只是把文件“读出来”，而是尽可能让文档中的结构、表格、页面、格式语义与办公流程重新变得可操作。从 HWP 到 PDF：把文档翻译成可理解的结构Kordoc 支持处理多种常见格式： HWP 3.x HWP 5.x...

jQuery的input框取值和赋值

取值 1$('#cowBeer').val() 赋值 1$("#cowBeer").attr("value", 666);

有信仰的人不会孤独。——阿列克谢耶维奇 vue官方文档有介绍$event 我们在开发中经常这么写来获取事件 1<div class="trigger-me" @click="triggerMe">点我触发</div> 方法： 123456methods: { triggerMe(e, name) { console.log('e: ', e); console.log('name: ', name); }} 然后调用一下可以看到打印出了事件，如果我们需要传入其他参数，就可以使用$event了 1<div class="trigger-me" @click="triggerMe($event, 'ruben')">点我触发</div> 再次触发：

人变老其实并不意味别的，只意味着不再对往事感到害怕。──斯蒂芬·茨威格分享一个网站可以很方便地编写readme：https://readme.so/ 只需要点击左侧的标签，即可生成相应模板非常方便和好用

阿超

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

数据加载中