mix-blend-mode

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

|浏览量:

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

分享一个好玩的css属性：

mix-blend-mode，MDN

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

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

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

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

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

1	mix-blend-mode: exclusion;

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

相关推荐

禁止文字图片拖拽

智者千虑，必有一失；愚者千虑，必有一得。——《史记》我们在进行开发的时候可能会遇到一个问题文字、图片选中后能被拖拽但我们不想要这种效果就可以给标签加一个属性 12<div ondragstart="return false">ruben</div><img ondragstart="return false" width="500px" src="https://VampireAchao.github.io/imgs/preview/3459_3.jpg"/> 之后就拽不动啦~

vue深度监听

放纵自己的欲望是最大的祸害；谈论别人的隐私是最大的罪恶；不知自己的过失是最大的病痛——亚里士多德我们有时使用vue的watch，可能要对一个对象的多个属性进行监听这样我们就可以使用深度监听 123456789101112131415161718192021222324252627282930313233343536<template> <view> </view></template><script>// 11位手机号码正则const REGEXP_TEL = /^((1[3,5,8,7,9,6][0-9])|(14[5,7])|(17[0,6,7,8])|(19[7]))\d{8}$/;export default { data() { return { // 表单数据存储 formData: { username: '', password: '' }...

我荒废了时间，时间便把我荒废了。——莎士比亚 https://github.com/gitalk/gitalk https://gitalk.github.io/ 用 Gitalk 给博客添加评论系统：优雅、开源、无后端依赖在搭建个人博客时，我们经常面临一个小难题：评论系统用什么好？传统方案如 Disqus 虽然功能强大，但加载慢、隐私问题多；国内的评论系统则可能存在稳定性和接入成本。于是我选择了一个更极客、更自由的方式：Gitalk —— 一个基于 GitHub Issues 的评论系统。什么是 Gitalk？Gitalk 是一个利用 GitHub Issues 构建的评论系统，由 gitalk 开发者团队创建。它的设计理念很简单：既然每个人都有 GitHub 账号，为什么不能用 GitHub 直接发评论？它通过 GitHub 的 OAuth 授权，允许访问者在你指定的仓库中创建/回复 issue，从而完成评论功能。 Gitalk 的优点 ✅ 完全免费，只依赖 GitHub，无需后端服务器 ✅ 界面简洁，支持 Markdown、高亮、表情 ...

TinyVue组件库

君子不隐其短，不知则问，不能则学。——董仲舒文档： TinyVue：一套跨端、跨框架的企业级 UI 组件库，支持 Vue 2 和 Vue 3，支持 PC 端和移动端代码： https://github.com/opentiny/tiny-vue 在项目的根目录中，打开控制台，执行以下命令，为 Vue 3.0 的项目安装 TinyVue 组件库： 123yarn add @opentiny/vue@3# 或者npm install @opentiny/vue@3 或者执行以下命令，为 Vue 2.0 的项目安装 TinyVue 组件库： 123yarn add @opentiny/vue@2# 或者npm install @opentiny/vue@2 如果是Vite 工程，安装完依赖后，修改项目的 vite.config.js ，添加以下代码突出显示的部分： 1234567891011// vite.config.jsimport { defineConfig } from 'vite'import vue from &#x...

生活中，谅解是可以温厚的宽恕；谅解可以换回感情上的损失。——佚名分享一个前端项目：https://soulwire.github.io/sketch.js 用途是可以做一些鼠标特效，例如其官网有很多例子： https://soulwire.github.io/sketch.js/ 非常的有趣

只回忆过去是差劲的记忆。——卡罗尔 https://github.com/outline/outline https://www.getoutline.com/ Outline: 一个现代化的团队知识库项目概述Outline 是一个快速、协作的知识库，旨在帮助团队更高效地管理和分享知识。它基于 React 和 Node.js 构建，提供了一个现代化的界面和丰富的功能，支持团队内部的文档管理和协作。关键功能协作编辑：支持多用户同时编辑文档，实时同步变化。文档嵌入：支持嵌入各种类型的媒体，如图片、视频、代码片段等。版本控制：每次文档修改都会自动保存新版本，方便用户查看和恢复历史版本。全文搜索：强大的全文搜索功能，快速定位所需文档内容。权限管理：灵活的权限管理系统，确保文档安全。项目活动最近发布最新发布的版本是 v0.82.0，包括以下主要改进：提到文档时自动保持标题和图标同步。编辑器嵌入内容现在可以垂直调整大小。粘贴链接时有嵌入或链接的选项。升级 Mermaid 图表到 v11。粘贴远程图片时会自动上传到 Outline 存储。新表格现在具有固定宽度...

阿超

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

数据加载中