mix-blend-mode

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

|浏览量:

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

分享一个好玩的css属性：

mix-blend-mode，MDN

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

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

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

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

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

1	mix-blend-mode: exclusion;

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

相关推荐

import模块失效

一点浩然气，千里快哉风。——宋•苏轼昨天公司实习生问我这个import为什么一直报错，他代码如下：报错信息如下： 1Uncaught SyntaxError: Cannot use import statement outside a module 实际上是因为script标签没有加type导致的 12345678910111213<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <script type="module"> import {ruben} from './js/module.js' console.log(ruben) </script> </body></html> 这样就可以了可以看到正常...

apache-shenyu的mcp-plugin前端优化

求知与求学的欲望应该采用一切可能的方式去在孩子们身上激发起来。——夸美纽斯 pr： [Feat] mcp server by Aias00 · Pull Request #528 · apache/shenyu-dashboard · GitHub 主要是将多余代码移除，然后使用react-json-view组件进行json样式的渲染 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143...

天下之事不难于立法，而难于法之必行。一一明·张居正 EdgeOne Pages：腾讯云推出的现代前端开发与部署新体验在现代 Web 开发持续演进的大潮中，开发者对前端托管、性能优化、无服务器化和全球加速的需求日益提升。腾讯云基于其强大的 EdgeOne 边缘计算基础设施，推出了面向开发者的全新前端平台——EdgeOne Pages，为构建、部署和加速静态站点及无服务器应用带来极致体验。一、什么是 EdgeOne Pages？EdgeOne Pages 是一站式前端开发与部署平台，专为现代 Web 项目量身定做。它不仅支持静态页面的极速托管，还内置边缘 Serverless 能力，让你用 JavaScript 直接在全球边缘节点编写动态服务，无需管理服务器或基础设施，轻松实现低延迟、全球可用的前后端一体化应用。二、核心产品优势1. 全球加速，极致性能依托腾讯云分布全球的边缘节点，EdgeOne Pages 能将静态资源自动缓存到离用户最近的位置，大幅提升页面打开速度和访问体验。无论访客来自国内外，网站都能保持高可用和低延时。 2. 极简部署，自动化上线集成高效的自动...

无论掌握哪一种知识，对智力都是有用的，它会把无用的东西抛开而把好的东西保留住。——达·芬奇分享一个前端消息提示组件库ToastifyJs https://github.com/apvarun/toastify-js 引入： 1npm install --save toastify-js 或者 123<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/toastify-js/src/toastify.min.css"><script src="https://cdn.jsdelivr.net/npm/toastify-js"></script> 使用： 1Toastify({ text: "This is a toast", duration: 3000 }).showToast(); 复杂例子： 123456789101...

wangeditor自定义菜单

时间是衡量事业的标准。 —— 培根代码如下： 123456789101112131415161718192021222324252627282930313233import { DomEditor, IButtonMenu, IDomEditor, ISelectMenu } from '@wangeditor/editor'export class MentionMenu implements IButtonMenu { constructor() { this.title = '设置标签' // this.iconSvg = '<svg >...</svg>' this.tag = 'button' } title: string iconSvg?: string | undefined hotkey?: string | undefined alwaysEnable?: boolean ...

一百个满怀信心和决心的人，要比一万个谨小慎微的和可敬的可尊重的人强得多。——辛克莱最近发现前端中对于数组有这样一个函数splice非常好用首先我们可以这样 12var list = [1,2,3,4,5];list.splice(1) 可以看到我们从下标为1开始的2，截取了剩余部分最后结果为2,3,4,5 但这是splice函数的返回值，我们如果看之前的list，可以看到只剩1了因为1后面的被我们的splice截取掉啦那我们如果传入两个参数，例如我这里从下标为3开始，截取两个元素我们再看看原来的list，果然是剩下的1,2,3 如果我们想要截取时还要对应替换的话？例如我这里想把3,4,5替换成4,5,6 就可以这么写最后得到的list就是我们想要的结果但如果我们想要截取掉的部分，就直接取splice的返回值即可这里从下标2开始截取掉了两个元素3,4，换成了4,5

阿超

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

数据加载中