mix-blend-mode

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

|浏览量:

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

分享一个好玩的css属性：

mix-blend-mode，MDN

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

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

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

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

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

1	mix-blend-mode: exclusion;

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

相关推荐

typescript-exercises（四）

取悦于人并不困难，问题只是你是否能够了解别人的喜恶心理。——卡耐基题目： 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970/*Intro: As we introduced "type" to both User and Admin it's now easier to distinguish between them. Once object type checking logic was extracted into separate functions isUser and isAdmin - logPerson function got new type errors.Exercise: Figure out how to help TypeScript understand types i...

echarts-for-react

话可以收回，但人生不可能这样。——席勒 https://github.com/hustcc/echarts-for-react echarts-for-react：React 下的 Apache ECharts 超简封装体验在数据可视化的世界里，Apache ECharts 以其强大、灵活和极致的交互性能，在前端圈中久负盛名。但对于 React 开发者来说，如何优雅、便捷地在 React 项目中集成 ECharts，一直是个高频需求。今天就来深度体验一把——echarts-for-react，一个极简的 ECharts React 封装库。项目简介echarts-for-react 是由 hustcc 大佬维护的 React 封装组件，让你能在 React 应用中“丝滑”地使用 Apache ECharts。仓库地址：hustcc/echarts-for-react 官网：https://git.hust.cc/echarts-for-react 主要语言：TypeScript Star 数：4834+ Fork 数：655+ 关键标签：echarts re...

css直接引用svg代码

一切安乐，无不来自困苦。——《我是猫》有些时候我们想直接引入一个svg图标，又不想创建svg文件，或者编写svg代码到html中，想直接在css中引入可以转码+加前缀直接引用，这是一段svg代码 123456789101112<svg viewBox='0 0 161 161' xmlns='http://www.w3.org/2000/svg'> <filter id='noiseFilter'> <feTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/> </filter> <rect width='100%'...

el-input-number阻止外层button的冒泡

取法于上，仅得为中；取法于中，故为其下。一一李世民《帝范》我这里有这样一个按钮 123<el-button @click="randomChoose" type="success" size="small"> 选择<el-input-number controls-position="right"></el-input-number>个</el-button> 效果如下我们发现点击右边上下去增加减少中间个数的时候，也执行了我们上边按钮绑定的randomChoose 函数但我们想要加上阻止冒泡却加不上这里其实。。需要在外层再加上一个span或者div标签，再到这个span标签上加上阻止冒泡才可以生效 1234567<el-button @click="randomChoose" type="success" size="small"> 选择 <span @c...

react完成井字棋小游戏

人生就像迷宫，我们用上半生找寻入口，用下半生找寻出口。——朱德庸上次说到我们按照官方文档体验了一下React 这次我们搭建本地react开发环境，首先需要将node升级到14以上并且npm需要5.6以上，这个去官网下载安装包覆盖安装即可然后我们按照教程创建项目 1npx create-react-app my-app 注意第一行的 npx 不是拼写错误 —— 它是 npm 5.2+ 附带的 package 运行工具。然后删除src目录下的默认文件，创建一个index.css以及index.js index.css 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950body { font: 14px "Century Gothic", Futura, sans-serif; margin: 20px; } ol, ul { padding-left: 30px...

jquery跳转页面指定元素位置

懒惰象生锈一样，比操劳更能消耗身体;经常用的钥匙，总是亮闪闪的。——富兰克林代码如下 12345678// 获取到jquery节点 var targetDom = $('#achao') // 获取x坐标 var x = targetDom.offset().top; // 获取y坐标 var y = targetDom.offset().left; // 页面800ms内跳转到x坐标-200的地方 $('html,body').animate({scrollTop: x-200}, 800);

阿超

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

数据加载中