mix-blend-mode

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

|浏览量:

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

分享一个好玩的css属性：

mix-blend-mode，MDN

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

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

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

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

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

1	mix-blend-mode: exclusion;

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

相关推荐

vuepress-theme-vdoing

要品味生活的浪漫，你得有点儿演员精神，必须像个旁观者，对自己的所作所为既超然事外又忘我投入。——毛姆《月亮和六便士》分享一个VuePress知识管理&博客主题官方文档：https://doc.xugaoyi.com/ github：https://github.com/xugaoyi/vuepress-theme-vdoing 提供多种主题模式看起来也很简洁，还有对应的广告位也有用来做博客的 mybatis-plus也用的该主题

青年人如果有青年人的精神，这精神就是乐观——茅盾这是一个Vue关系图谱组件，可以展示如组织机构图谱、股权架构图谱、集团关系图谱等知识图谱，可提供多种图谱布局，包括树状布局、中心布局、力学布局自动布局等。 git仓库：https://github.com/seeksdream/relation-graph 文档地址：http://relation-graph.com/#/docs/start 在线体验：http://relation-graph.com/#/demo/layout-center 甚至包含在线配置工具十分强大

置顶小标签

美色不同面，皆佳于目；悲音不共声，皆快于耳。——王充原理是通过一个红色div加红色背景颜色，旋转45后度再整个边框设置超出部分隐藏效果如下：代码： 12345<div class="top-article-tag-parent"> <div class="top-article-tag"> 置顶 </div></div> 样式： 123456789101112131415161718.top-article-tag-parent { overflow: hidden; position: absolute; right: 46rpx; height: 80rpx; width: 100rpx; zoom: 0.8;}.top-article-tag { color: #fff; background-color: #ff0000; width: 150rpx; height: 40rpx; text-align: cente...

vue-loading-overlay

只要有一双真诚的眼睛陪我哭泣，就值得我为生命受苦。——罗曼·罗兰的《欣悦的灵魂》 https://github.com/ankurk91/vue-loading-overlay demo： https://ankurk91.github.io/vue-loading-overlay/ Vue Loading Overlay：简洁高效的加载指示器组件介绍在现代Web应用中，为了提升用户体验，加载指示器是一个必不可少的组件。尤其在处理异步请求或其他耗时操作时，加载指示器可以有效地告知用户当前的状态。Vue Loading Overlay 是一个为 Vue.js 应用提供全屏加载指示器的组件，简洁高效，易于集成和使用。本文将介绍什么是 Vue Loading Overlay、其主要功能及其使用方法，并展示如何在项目中集成和使用这个组件。什么是 Vue Loading Overlay？Vue Loading Overlay 是一个 Vue.js 组件，用于在页面加载时显示全屏或局部加载指示器。它可以轻松集成到 Vue.js 项目中，通过简单的配置和调用即可实现加载指示器的显示和隐...

vue中slot插槽

Be weird. Your strangeness is your magic. 我们在进行vue开发中，经常会使用到slot插槽插槽允许我们在父组件引用子组件时，在组件其中放一段可以带标签的元素，甚至放入其他组件等例如我这里定义一个组件 12345678910111213141516171819<template> <div> <header><slot name="header" :user="user">-------</slot></header> <main><slot :user="user">默认内容</slot></main> <footer><slot name="footer" :user="user">-------</slot></footer> </div><...

uniapp-x之uts插件运行hutool

若要为自己而活，首先必须为别人而活。——色内卡注意这里是安卓真机设备注意配置好HBuilderX的gradle配置、JDK配置、安卓SDK配置等，在HBuilderX的运行配置中能找到首先HBuilderX新建一个uniapp-x工程就是在uni-app项目默认模板下面勾选uni-app x 然后先运行到安卓手机上，我们自定义一个基座 HBuilderX选择运行——运行到手机或模拟器——制作自定义调试基座我这里输入包名，等待云打包完成后即可在运行到Android真机设备时选择自定义基座运行然后我们右键新建一个目录叫uni_modules，右键uni_modules新建uni_modules插件选择UTS插件-API插件新建，我这里输入的名字叫dromara-hutool 新建以后我们在uni_modules/dromara-hutool/utssdk/app-android/config.json中引入hutool的依赖 123456{ "minSdkVersion": "21", "dependenc...

阿超

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

数据加载中