mix-blend-mode

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

|浏览量:

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

分享一个好玩的css属性：

mix-blend-mode，MDN

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

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

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

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

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

1	mix-blend-mode: exclusion;

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

相关推荐

使用Console Importer安装lodash并使用

健康和才智是人生两大幸事。——米南德我今天在逛lodash官方文档，用Console Importer仅需安装时除了我们一般的使用方式也就是$i("lodash") 12345678$i("lodash")importer.js:2 [$i]: Searching for lodash, please be patient...undefinedimporter.js:2 [$i]: lodash not found, import lodash.js instead.importer.js:2 [$i]: lodash.js is loading, please be patient...importer.js:2 [$i]: lodash.js(https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js) is loaded._.camelCase('Foo Bar');'fooBar' 还可以直接Vue ...

不要从你自己的口袋里掏出勋章借给你的朋友，这是侮辱他的——泰戈尔分享一个真实的雨滴效果： https://tympanus.net/Development/RainEffect/#slide-1 github地址：https://github.com/codrops/RainEffect 还是非常炫酷的

在vue中使用ts

诚实的生活方式其实是按照自己身体的意愿行事，饿的时候才吃饭，爱的时候不必撒谎。——马尔克斯《霍乱时期的爱情》官方文档：https://www.typescriptlang.org/docs/handbook/intro.html 首先找到中文文档：https://www.tslang.cn/samples/index.html 寻找到vue.js 跳转过去后就是教程，我们跟着教程一步一步来首先新建一个空项目然后新建src目录和components目录 1234typescript-vue-tutorial/├─ dist/└─ src/ └─ components/ 输入命令下载依赖 1D:\file\projects\vue-ts-demo>cnpm install --save-dev typescript webpack webpack-cli ts-loader css-loader vue vue-loader vue-template-compiler 很快就下载完毕然后初始化ts环境 1tsc --init 可以看到多出了ts配置文...

chrome浏览器插件开发快速入门

劝君正向光明面，心自安详气自盈。——佚名文档地址： Hello World 扩展程序 | Chrome Extensions | Chrome for Developers Hello World 扩展程序通过构建您的第一个 Hello World 扩展程序，了解 Chrome 扩展程序开发的基础知识。概览您将创建一个“Hello World”在本地加载扩展程序、查找日志并探索其他建议。 Hello World当用户点击扩展程序工具栏图标时，此扩展程序将显示“Hello Extensions”。 Hello Extension 弹出式窗口首先，创建一个用于存储扩展程序文件的新目录。如果您愿意，也可以下载 GitHub 中的源代码。接下来，在此目录中创建一个名为 manifest.json 的新文件。此 JSON 文件描述了扩展程序的功能和配置例如，大多数清单文件都包含 "action" 键，用于声明 Chrome 应用作扩展程序操作图标的图片，以及。 12345678910{ ...

睡在哪里都是睡在夜里。 ——贾平凹《废都》分享一个开源项目： GitHub - mdit-vue/mdit-vue: markdown-it plugins for Vue.js 这个项目在这里为 markdown-it 提供一些统一的插件，这是 JS 世界中最受欢迎的 markdown 解析器之一，以使其更好地与 Vue 配合使用它是markdown-it的vue插件 GitHub - markdown-it/markdown-it: Markdown parser, done right. 100% CommonMark support, extensions, syntax plugins & high speed https://markdown-it.github.io/

或许美化灵魂有不少途径，但我想，阅读是其中易走的，不昂贵的，不须求助他人的捷径。——严歌苓《读书与美丽》 https://github.com/wanglin2/mind-map 思绪 Simple mind map 深度解析：一个简单 & 强大的 Web 思维导图库与跨平台应用生态仓库地址：wanglin2/mind-map开发文档：https://wanglin2.github.io/mind-map-docs/在线使用（网页版思维导图）：https://wanglin2.github.io/mind-map/中文名：思绪思维导图（Simple mind map） 1. 项目定位Simple mind map 是一个不依赖任何前端框架的 JS 思维导图库，同时作者基于该库又构建了一个可直接在线使用的 Web 思维导图应用（基于 Vue2 + ElementUI）。它的目标不是“花哨”，而是专注于：核心逻辑简洁扩展机制清晰（插件化）高度可配置与自定义支持多结构、多格式、多媒体内容节点可以既做“库”又做“产品”，利于二次...

阿超

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

数据加载中