mix-blend-mode

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

|浏览量:

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

分享一个好玩的css属性：

mix-blend-mode，MDN

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

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

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

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

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

1	mix-blend-mode: exclusion;

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

相关推荐

vue父组件调用子组件方法

抱怨身处黑暗，不如提灯前行。——刘同首先是官方文档这里使用ref属性去访问子元素 1<hello-world ref="helloWorld" msg="Hello World"></hello-world> 然后打印一下 1console.log(this.$refs.helloWorld); 可以看到成功获取到再到子组件定义一个方法：父组件访问：效果：

即使是最神圣的友谊里也可能潜藏着秘密，但是你不可以因为不能猜测出朋友的秘密而误解了他——贝多芬分享一个网站css-diner https://flukeout.github.io/ 其能够让你通过益智的方式学习css选择器例如此处两个盘子，对应的标签为plate，鼠标移动上去还有高亮，我们需要选中所有的盘子则使用plate标签选择器源码地址：https://github.com/flukeout/css-diner

时穷节乃见,一一垂丹青。一一文天祥 https://capjs.js.org/ GitHub - tiagorangel1/cap: Cap is a lightweight, modern open-source CAPTCHA alternative using SHA-256 proof-of-work Cap：让互联网更安全的下一代轻量开源 CAPTCHA在数字时代，恶意机器人（bot）的攻击愈演愈烈，传统的 CAPTCHA（验证码）方案却不断被诟病：要么难用、臃肿，要么侵犯隐私、依赖巨头。有没有更现代、更轻量、更注重隐私和易用性的解决方案？今天为大家介绍一款令人眼前一亮的项目——Cap：一个基于 SHA-256 工作量证明（proof-of-work）、极致轻量且完全开源的全新 CAPTCHA 替代品。 Cap 是什么？Cap 由 tiagorangel1 开发，是一款现代化、轻量级的开源 CAPTCHA 替代方案，采用 SHA-256 工作量证明机制，主打快速、私密且极易集成。Cap 具备以下核心特性：极致轻量：主前端库 @cap.js/widget...

typescript-exercises

要随时牢记在心中：决心取得成功比任何一件事情都重要。——林肯分享一个学习typescript练习的开源项目 github: https://github.com/typescript-exercises/typescript-exercises 网站： https://typescript-exercises.github.io/ 这里有不同的练习，目前是16个，例如： 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103/*Welcome to: ................................................................ . ...

react-json-view

小不忍，则乱大谋。——孔子分享一个react的json编辑器 https://github.com/mac-s-g/react-json-view 演示： RJV Demo

资源路径与blobUrl互转

害怕树敌的人永远得不到真正的朋友——哈兹里特首先是普通资源URL转换为blobUrl 12345678910111213// 生成blobURLconst xhr = new XMLHttpRequest();xhr.open('GET', 'https://VampireAchao.github.io/imgs/preview/3356_3.jpg', true);xhr.responseType = 'blob';xhr.onload = function (e) { if (this.status == 200) { var blob = this.response; console.log(blob); // document.getElementById("myImg").src = URL.createObjectURL(blob); console.log(URL.createObjectURL(bl...

阿超

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

数据加载中