mix-blend-mode

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

|浏览量:

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

分享一个好玩的css属性：

mix-blend-mode，MDN

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

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

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

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

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

1	mix-blend-mode: exclusion;

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

相关推荐

我们可以随自己的高兴来认识这个世界，然而世界总少不了光明面和阴暗面。——歌德今天研究了下psd的脚本 Photoshop 中的脚本 https://github.com/Adobe-CEP/CEP-Resources/tree/master/Documentation/Product%20specific%20Documentation/Photoshop%20Scripting 然后下载了脚本监视器插件，可以让我们在使用psd时生成对应的脚本 Downloadable plug-ins and content in Photoshop 然后解压，复制Scripting Utilties 粘贴到PS的路径下面的Plug-ins下面重启ps即可，之后执行操作则会在桌面生成脚本文件脚本内容： 1234567891011121314151617181920212223242526272829303132333435363738394041// Copyright 2002-2007. Adobe Systems, Incorporated. All right...

GameDev.js Jam 2025

少年时代，她觉得选择为时过早，而现在已是青年，她又觉得改变为时已晚。——保罗·科埃略的《韦罗妮卡决定去死》我最近发现了一个非常有趣的活动——GameDev.js Jam 2025。这个活动为全球的游戏开发者提供了一个展示创意和技能的平台。今天，我将为大家详细介绍一下这个活动的特点和参与方式。什么是 GameDev.js Jam？GameDev.js Jam 是一个年度的在线游戏开发竞赛，旨在鼓励开发者使用 JavaScript 及其相关技术进行游戏开发。无论你是专业开发者还是业余爱好者，都可以参加这个活动，展示你的创意和技术。活动亮点1. 全球参与GameDev.js Jam 吸引了来自世界各地的游戏开发者参与。你将有机会与全球的开发者交流经验，分享心得，提升自己的技能。 2. 丰厚的奖品活动为获奖者提供了丰厚的奖品，包括现金奖励、硬件设备和软件许可证等。这些奖品不仅是对你努力的认可，也能为你的未来开发提供支持。 3. 专业的评审参赛作品将由一组专业的评审进行评判。这些评审来自游戏开发行业，他们的反馈和建议将对你的作品有很大的帮助。 4. 学习和成长通过参与 GameD...

真理的范围在大炮射程之内。——俾斯麦 https://astro.build/ https://github.com/withastro/astro Astro：为内容驱动的网站打造的现代前端框架在前端框架百花齐放的今天，React、Vue、Svelte 等已经牢牢占据开发者的视野。而 Astro，则以一种“反潮流”的方式切入了战场——它不试图成为全能框架，而是专注于一个核心场景：内容驱动的静态网站。什么是 Astro？Astro 是一个现代的静态网站构建工具，主打“少 JavaScript，多性能”。它允许开发者使用多种框架（React、Vue、Svelte、Solid 等）构建组件，但最终构建时，只会输出最小的 HTML、CSS 和必要的 JS，实现几乎“零 JS 运行时”。一句话总结：Astro 是为了构建快如闪电的内容网站而生的静态站点生成器。核心特性1. 零 JS 默认输出Astro 默认不会给你的页面添加任何 JavaScript，除非你显式启用交互。这种“按需加载”策略，让页面加载速度大幅提升，非常适合博客、文档、企业官网等。 2. 跨框架组件支持在一个项...

现实生活喜欢对称和轻微的时间错移。——博尔赫斯《南方》填坑，官方文档：https://www.typescriptlang.org/docs/handbook/enums.html 我新建了一个vue项目用来演示这里代码如下： 12345678910enum Direction { Up, Down, Left, Right}console.log({ Direction });console.log({ 'Object.entries(Direction)': Object.entries(Direction) });console.log({ 'Direction[0]': Direction[0] });console.log({ 'Direction.Up': Direction.Up }); 打印结果如下：定义一个双向绑定的值 1const count = ref(Direction.Up)...

生活中，谅解是可以温厚的宽恕；谅解可以换回感情上的损失。——佚名分享一个前端项目：https://soulwire.github.io/sketch.js 用途是可以做一些鼠标特效，例如其官网有很多例子： https://soulwire.github.io/sketch.js/ 非常的有趣

vue2使用vite过渡

君子藏器与身，待时而动。——佚名项目介绍 vite-plugin-vue2 是一个 Vite 插件，专门用于在 Vite 项目中支持 Vue 2。Vite 是一个基于 ES Module 的现代构建工具，它以极速启动、模块热替换（HMR）和极快的构建速度而闻名。然而，Vite 最初只支持 Vue 3，而 vite-plugin-vue2 插件使得开发者能够在不升级到 Vue 3 的情况下，继续享受 Vite 的高效开发体验。通过这个插件，开发者可以在 Vue 2 项目中体验到 Vite 的快速启动、热重载和高效打包，而无需迁移到 Vue 3。这为那些已经深度使用 Vue 2 的项目提供了极大的便利。主要特点： Vue 2 支持：在 Vite 项目中使用 Vue 2，无需进行复杂的配置或迁移。现代开发体验：支持 Vite 的快速启动、热模块替换（HMR）、高效的编译和打包。兼容性：与现有的 Vue 2 项目无缝集成，不影响现有代码库的运行。 GitHub地址 GitHub 仓库：vitejs/vite-plugin-vue2 官方文档提供了详...

阿超

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

数据加载中