mix-blend-mode

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

|浏览量:

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

分享一个好玩的css属性：

mix-blend-mode，MDN

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

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

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

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

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

1	mix-blend-mode: exclusion;

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

相关推荐

css的透视效果perspective

有两件事我最憎恶：没有信仰的博才多学和充满信仰的愚昧无知。——爱默生我们知道css中我们的transform可以调整z轴，这说明css是有3d能力的但是我们通常看一个3d的物体，是近的地方大，远的地方小甚至被遮挡，要实现这样的透视效果其实只需要一个css属性即可 https://developer.mozilla.org/zh-CN/docs/Web/CSS/perspective 就比如这个正方体： .face { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; position: absolute; backface-visibility: inherit; font-size: 60px; color: #fff } .front { background: rgba(90,90,90,.7); transform: translateZ(50px)...

之前写了一篇javascript防抖是应用在按钮中的今天继续完善一下,下面的函数ruben就算循环10亿次，一秒内也会只调用一次 123456789101112131415var antiShakeFlag = false; function ruben() { if (antiShakeFlag) { return; } console.log("ruben") antiShakeFlag = true; setTimeout(() => { antiShakeFlag = false; }, 1000); } for (let i = 0; i < 10; i++) { console.log("achao&qu...

vue项目配置可选调用链

生活是苦难的，我又划着我的断桨出发了。——博尔赫斯可选调用链就是?.写法有些vue项目没有默认配置，因此只能手动配置介绍：https://babeljs.io/docs/en/babel-plugin-proposal-optional-chaining 安装： 1cnpm i --save-dev @babel/plugin-proposal-optional-chaining 然后配置在根目录下的babel.config.js 新增： 123{ "plugins": ["@babel/plugin-proposal-optional-chaining"]} 完整： 12345678module.exports = { presets: [ "@babel/preset-env", ['@vue/app', { useBuiltIns: 'entry' }] ], "plugi...

ant design blazor

帮人要帮心，帮心要知心，知心要诚心。——伊索分享一个ant design出品的Blazor库 https://antblazor.com/zh-CN/ GitHub - ant-design-blazor/ant-design-blazor: 🌈A set of enterprise-class UI components based on Ant Design and Blazor WebAssembly. Blazor是用于.net构建web应用的框架 https://github.com/dotnet/blazor GitHub - dotnet/aspnetcore: ASP.NET Core is a cross-platform .NET framework for building modern cloud-based web applications on Windows, Mac, or Linux.

img图片丢失后默认图

万物并育而不相害，道并行而不相悖。一一《礼记》我们在使用img标签时经常会遇到图片丢失等情况，我们可以给图片设置一个默认图写法如下： 1<img src onerror="this.src='/img/oss/2020-06-01/head.jpg'" /> 这时候我们并没有给src属性赋值，导致触发onerror事件，执行了其中的js 当然如果我们是正常的图片，是无影响的

如果学生没有学习的积极要求，教师越是把注意局限在知识上，学生对自己学习上的成绩就越冷淡，学习愿望就越低落。——苏霍姆林斯基《给教师的建议》 https://github.com/galaxy-s10/billd-live Billd Live：基于 WebRTC 的开源在线互动直播系统@galaxy-s10/billd-live 是一个开源、高可定制性的在线互动直播系统。它采用现代前端技术栈，结合 WebRTC 实时音视频传输和 Node.js 服务端，支持多人连麦、弹幕互动、屏幕共享、录制回放等丰富功能，适用于教育培训、在线会议、远程协作、娱乐直播等多种场景。项目简介Billd Live 致力于为开发者和团队提供一套可自由扩展、二次开发友好的 Web 端直播解决方案。项目结构清晰，模块化强，既适合用作生产环境的直播/会议系统，也适合用作学习 WebRTC、Socket.io、前后端分离架构的技术参考。技术栈前端：Vue3、Vite、TypeScript、Element Plus 实时音视频：WebRTC 通信：Socket.io（信令服务器） ...

阿超

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

数据加载中