vue3 背景虚化,文字高亮效果
效果:

组件代码:
<template><div :style="styleComputed" class="background-blurring"><div class="mask"></div><div :style="styleComputed" class="blurring-text">background</div></div>
</template><script setup>
import { computed } from "vue";
const props = defineProps({url: String
});const styleComputed = computed(() => {return {backgroundImage: `url(${props.url})`};
});
</script><style scoped>
.background-blurring {background-repeat: no-repeat;width: 100%;height: 100%;font-size: 12vw;position: relative;
}
.background-blurring .blurring-text {width: 100%;height: 100%;-webkit-text-stroke: 2px #fff;display: flex;justify-content: center;align-items: center;position: absolute;left: 0;top: 0;background-clip: text;color: #0000;
}
.mask {width: 100%;height: 100%;background: rgba(0, 0, 0, 0.7);
}
</style>
使用代码:
<template>// 传入图片资源<BackgroundBlurring :url="img"/>
<template><script setup>
// 引入组件
import BackgroundBlurring from "./components/BackgroundBlurring.vue";
// 引入资源
import img from "@/assets/imgs/background.jpg";
</script>
相关文章:
vue3 背景虚化,文字高亮效果
效果: 组件代码: <template><div :style"styleComputed" class"background-blurring"><div class"mask"></div><div :style"styleComputed" class"blurring-text">background</div>&l…...
开源一个可以调RGB三色的小灯棒子
开源一个可以调灯的小灯棒子。 主控用的STC8G1K08A-SOP8,RGB三色灯是WS2812B。 开源到立创开源广场了,可以直接进入下方链接,那边可以直接查看原理图和PCB。 一个可调RGB三色的小灯棒子 - 立创开源硬件平台一个可调RGB三色的小灯棒子https…...
在聚类算法的领域特定语言(DSL)中添加一个度量矩阵组件
以下是一个详细的步骤和示例代码,用于在聚类算法的领域特定语言(DSL)中添加一个度量矩阵组件,同时满足处理数据集能达到完美聚类且改进后查询次数少于改进前的要求。 整体思路 定义DSL和原聚类算法:首先,…...
【C++】list 链表的使用+模拟实现
目录 文章目录 前言 一、list的简介 二、list的使用方法 三、list的模拟实现 1.基本框架: 2.迭代器实现 3.常用接口实现 四、完整代码 总结 前言 本文主要介绍C【STL】容器中的 list,包括接口说明和模拟实现。其中讲解了迭代器功能上的分类&am…...
AI助力小微企业技术开发规范化管理 | 杂谈
AI助力小微企业技术开发规范化管理 在小型技术研发企业中,人员配置紧张,往往一名员工需要承担多项职务和任务。例如,后端程序开发人员可能同时要负责需求调研、数据库设计、后端设计及开发,甚至在某些情况下还需兼任架构师的角色。…...
Android 实现 RTMP 推流:快速集成指南
简介 在 Android 设备上实现 RTMP 推流,可以用于直播、远程监控等应用场景。本文将基于 rtmp-rtsp-stream-client-java 库,介绍如何在 Android 端快速集成 RTMP 推流,包括权限管理、相机预览、推流控制等关键步骤。 步骤 1. 配置 Maven 仓库 在 settings.gradle.kts 中添…...
pipeline 使用git parameter插件实现动态选择分支构造
效果,,点击build with Parameters 就会出现右边的当前仓库的所有的分支,默认最多显示5个,可以修改配置,修改显示的最大分支数量。如果分支太多,可以通过右边的过滤框输入过滤。 安装git params插件 搜索g…...
postcss.config.js 动态配置基准值
在Vue项目中引入PostCSS可以实现不同分辨率的自适应,通常在H5项目中使用 1. 安装插件 npm install --save-dev postcss postcss-loader autoprefixer 2. 新建postcss.config.js文件,添加下列配置项 module.exports {plugins: {postcss-px-to-viewpor…...
DeepSeek 冲击(含本地化部署实践)
DeepSeek无疑是春节档最火爆的话题,上线不足一月,其全球累计下载量已达4000万,反超ChatGPT成为全球增长最快的AI应用,并且完全开源。那么究竟DeepSeek有什么魔力,能够让大家趋之若鹜,他又将怎样改变世界AI格…...
eNSP下载安装(eNsp、WinPcap、Wireshark、VirtualBox下载安装)
一、下载 下载网址:https://cloud.grbj.cn/softlink/eNSP%20V100R003C00SPC100%20Setup.exe 备用临时网址:https://linshi.grbj.cn/abdpana/softlink 二、准备工作 系统要求 关闭防火墙 三、安装 3.1安装WinPcap 基本都是下一步,双击&…...
利用Ai对生成的测试用例进行用例评审
利用AI对生成的测试用例进行用例评审,可以从用例的完整性、有效性、一致性等多个维度展开,借助自然语言处理、机器学习等技术,提高评审效率和准确性。以下为你详细介绍具体方法: 1. 需求匹配度评审 利用自然语言处理(NLP)技术 步骤:首先将软件需求文档和生成的测试用例…...
C#上位机--跳转语句
在 C# 编程中,跳转语句用于改变程序的执行流程。这些语句允许程序从当前位置跳转到其他位置,从而实现特定的逻辑控制。本文将详细介绍 C# 中四种常见的跳转语句:GOTO、Break、Continue 和 Return,并通过具体的示例代码来展示它们的…...
`sh` 与 `bash` 的区别详解
sh 与 bash 的区别详解 1. 历史背景 sh (Bourne Shell): 由 Stephen Bourne 在 1977 年开发,是 Unix 系统的默认 Shell。语法简洁,但功能有限。 bash (Bourne Again Shell): 由 Brian Fox 在 1989 年开发,是 sh 的扩…...
*PyCharm 安装教程
PyCharm 安装教程,适用于 Windows、macOS 和 Linux 系统: 1. 下载 PyCharm 官网地址:https://www.jetbrains.com/pycharm/版本选择: Community(社区版):免费,适合基础 Python 开发…...
[特殊字符] Elasticsearch 双剑合璧:HTTP API 与 Java API 实战整合指南
🚀 Elasticsearch 双剑合璧:HTTP API 与 Java API 实战整合指南 一、HTTP API 定义与用途 Elasticsearch 的 HTTP API 是基于 RESTful 接口设计的核心交互方式,支持通过 URL 和 JSON 数据直接操作索引、文档、集群等资源。适用于快速调试、…...
网络和操作系统基础篇
网络和操作系统基础篇 TCP三次握手 客户端——发送带有SYN标志的数据包——服务端一次握手Client进入syn_sent状态;服务端——发送带有SYN/ACK标志的数据包——客户端二次握手服务端进入syn_rcvd;客户端——发送带有ACK标志的数据包——服务端三次握手…...
Oracle 连接报错:“ORA-12541:TNS:no listener ”,服务组件中找不到监听服务
一、 报错: navicat连接数据库报错:ORA-12541:TNS:no listener 二、排查问题 三、 解决问题 删除Oracle安装目录下选中的配置:listener.ora 及 listener*.bak相关的 cmd,用管理员打开 执行:netca 命…...
内外网文件传输 安全、可控、便捷的跨网数据传输方案
一、背景与痛点 在内外网隔离的企业网络环境中,员工与外部协作伙伴(如钉钉用户)的文件传输面临以下挑战: 安全性风险:内外网直连可能导致病毒传播、数据泄露。 操作繁琐:传统方式需频繁切换网络环境&…...
基于Flask的租房信息可视化系统的设计与实现
【Flask】基于Flask的租房信息可视化系统的设计与实现(完整系统源码开发笔记详细部署教程)✅ 目录 一、项目简介二、项目界面展示三、项目视频展示 一、项目简介 随着互联网的快速发展,租房市场日益繁荣,信息量急剧增加ÿ…...
《Keras 2 :使用 RetinaNet 进行对象检测》:此文为AI自动翻译
《Keras 2 :使用 RetinaNet 进行对象检测》 作者:Srihari Humbarwadi 创建日期:2020/05/17 最后修改日期:2023/07/10 描述:实施 RetinaNet:用于密集对象检测的焦点损失。 (i) 此示例使用 Keras 2 在 Colab 中查看 • 介绍 目标检测是计算机中非常重要的问题 视觉。在…...
本地LLM部署:硬件配置指南
文章主要探讨了自托管 AI 的优势及必要性,详细分析了与 AI 相关的关键硬件组件,包括 GPU、RAM、CPU 和 SSD,并强调了显存(VRAM)在 LLM 推理中的核心作用。文章还提供了从入门到发烧的硬件配置建议,如 Ollam…...
终极指南:如何高效构建中国行政区划五级联动数据系统
终极指南:如何高效构建中国行政区划五级联动数据系统 【免费下载链接】Administrative-divisions-of-China 中华人民共和国行政区划:省级(省份)、 地级(城市)、 县级(区县)、 乡级&a…...
【GUI-Agent】阶跃星辰 GUI-MCP 解读---()---论文
一、 什么是 AI Skills:从工具级到框架级的演化 AI Skills(AI 技能) 的概念最早在 Claude Code 等前沿 Agent 实践中被强化。最初,Skills 被视为“工具级”的增强,如简单的文件读写或终端操作,方便用户快速…...
从SGL到XSimGCL:图对比推荐中的“简化”革命与性能跃迁
1. 图对比学习推荐算法的演进之路 推荐系统领域近年来最令人兴奋的突破之一,就是图对比学习技术的引入。作为一名长期跟踪推荐算法发展的从业者,我亲眼见证了从传统协同过滤到图神经网络的演进,再到如今对比学习带来的性能飞跃。这就像是从手…...
告别Mixins混乱:用Vue3自定义Hooks重构你的业务逻辑(附图片转Base64实战)
告别Mixins混乱:用Vue3自定义Hooks重构你的业务逻辑(附图片转Base64实战) 在Vue2时代,Mixins曾是代码复用的主流方案,但随着项目复杂度上升,开发者们逐渐发现这种模式带来的隐式依赖和命名冲突问题。想象一…...
【UV打印机】理光喷头组合实战指南:从16H配置看效率与精度的平衡
1. 理光喷头组合的核心价值与应用场景 第一次接触UV打印机时,我被各种喷头配置搞得晕头转向。直到亲自调试了十几台设备后才明白,理光喷头的组合艺术本质上是在速度、精度、成本三者之间走钢丝。以常见的16H配置为例,看似简单的"一头两色…...
在WSL(Windows Subsystem for Linux)中部署和调试Qwen3.5-4B模型服务
在WSL中部署和调试Qwen3.5-4B模型服务 1. 为什么选择WSL部署AI模型 对于习惯Windows系统但又需要Linux环境的开发者来说,WSL提供了一个两全其美的解决方案。特别是当你需要在本地测试像Qwen3.5-4B这样的大语言模型时,WSL能让你在熟悉的Windows界面下享…...
期望、方差、协方差:从定义到核心性质的全方位解析
1. 期望:理解随机变量的"平均水平" 期望是概率论中最基础也最重要的概念之一,它描述了一个随机变量在大量重复试验中取值的"平均水平"。想象你每天记录午餐的花费,一个月后计算平均花费,这个平均值就是花费这…...
c++怎么获取文件的压缩比例信息_GetCompressedFileSize应用【实战】
GetCompressedFileSize返回的是NTFS压缩后磁盘占用字节数,非压缩比例;须先用GetFileAttributes检查FILE_ATTRIBUTE_COMPRESSED标志,否则结果无意义,且对非NTFS卷、加密或稀疏文件行为未定义。GetCompressedFileSize 返回值比实际大…...
解决Navicat正向工程从模型建表报错怎么办_外键关联与语法解析
Navicat正向工程ERROR 1005八成因外键约束底层校验失败,需查errno 150/121、确认被引用字段有完整索引且类型/字符集/NOT NULL严格一致,并勾选“内联生成外键”选项。Navicat 正向工程报错 ERROR 1005: Cant create table 怎么定位这错误八成不是建表语句…...
