当前位置： 首页 > news >正文

CSS小玩意儿：文字适配背景

news 2026/3/28 3:35:11

一，效果

在这里插入图片描述

二，代码

1，搭个框架

添加一张背景图片，在图片中显示一行文字。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>文字适配背景效果</title><style>.banner {height: 230px;background-image: url(banner.png);background-repeat: no-repeat;background-size: 100% 230px;line-height: 230px;text-align: center;}.title {margin: 0;color: #fff;font-size: 50px;}</style>
</head>
<body>
<div class="banner"><h1 class="title">dangfulin, 一个啥都想学的家伙</h1>
</div>
</body>
</html>
  1. 用 background-image 添加了一张图片。
  2. 然后结合 background-repeat: no-repeat; 设置了图片的展示方式。
  3. 通过background-size: 100% 230px;简单拉伸图片，让它充满元素。

效果如下：
在这里插入图片描述

2，添加动画

鼠标移入后，文字产生偏移动画。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>文字适配背景效果</title><style>.banner {height: 230px;background-image: url(banner.png);background-repeat: no-repeat;background-size: 100% 230px;line-height: 230px;text-align: center;}.title {margin: 0;color: #fff;font-size: 50px;transition: .5s;}.banner:hover .title {transform: translateX(-250px);}</style>
</head>
<body>
<div class="banner"><h1 class="title">dangfulin, 一个啥都想学的家伙</h1>
</div>
</body>
</html>
  1. 用 transform 指定一个平移效果。
  2. 然后用 transition 为动画效果添加一个简单的平滑过度。

效果：
在这里插入图片描述

3，产生色差

这里的“文字适配背景”就是让蚊子本身的颜色与背景图片中的颜色产生反差，只需要使用 mix-blend-mode 属性。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>文字智能适配背景效果</title><style>.banner {height: 230px;/*background-image: url(banner.png);*//*background-image: url(banner1.jpg);*//*background-image: url(banner2.jpg);*//*background-image: url(banner3.jpg);*/background-image: url(banner4.jpg);background-repeat: no-repeat;background-size: 100% 230px;line-height: 230px;text-align: center;}.title {margin: 0;color: #fff;font-size: 50px;transition: .5s;mix-blend-mode: difference;}.banner:hover .title {transform: translateX(-250px);}</style>
</head>
<body>
<div class="banner"><h1 class="title">dangfulin, 一个啥都想学的家伙</h1>
</div>
</body>
</html>

通过 mix-blend-mode: difference; 指定元素的内容与元素的直系父元素的内容和元素的背景在混合时产生反差。

三，优化

1，用 js 优化交互：向鼠标移入方向偏移。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>文字智能适配背景效果</title><style>.banner {height: 100%;background-image: url(banner.png);background-repeat: no-repeat;background-size: 100% 90vh;line-height: 400px;text-align: center;position: relative;overflow: hidden;}.title {margin: 0;color: #fff;font-size: 50px;transition: transform .5s;position: relative;mix-blend-mode: difference;}</style>
</head>
<body>
<div class="banner"><h1 class="title">dangfulin, 一个啥都想学的家伙</h1>
</div><script>const banner = document.querySelector('.banner');const title = document.querySelector('.title');const moveDistance = 250; // 移动的固定距离banner.addEventListener('mouseenter', function (event) {const rect = banner.getBoundingClientRect();const centerX = rect.left + rect.width / 2;// const centerY = rect.top + rect.height / 2;const mouseX = event.clientX;// const mouseY = event.clientY;const deltaX = mouseX - centerX;// const deltaY = mouseY - centerY;if (deltaX > 0) {// 向右移动title.style.transform = `translateX(${moveDistance}px)`;} else {// 向左移动title.style.transform = `translateX(-${moveDistance}px)`;}// if (Math.abs(deltaX) > Math.abs(deltaY)) {//     // 水平移动//     if (deltaX > 0) {//         // 向右移动//         title.style.transform = `translateX(${moveDistance}px)`;//     } else {//         // 向左移动//         title.style.transform = `translateX(-${moveDistance}px)`;//     }// } else {//     // 垂直移动//     if (deltaY > 0) {//         // 向下移动//         title.style.transform = `translateY(${moveDistance}px)`;//     } else {//         // 向上移动//         title.style.transform = `translateY(-${moveDistance}px)`;//     }// }});banner.addEventListener('mouseleave', function () {// 鼠标离开时复位title.style.transform = 'translate(0, 0)';});
</script>
</body>
</html>

效果：
在这里插入图片描述

2，代码简化：

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>文字适配背景效果</title><style>body {margin: 0;padding: 0;}.banner {height: 230px;background: url(banner.png) no-repeat center/cover;display: flex;justify-content: center;align-items: center;}.title {color: #fff;font-size: 2.5rem;transition: transform 0.5s ease;mix-blend-mode: difference;}.banner:hover .title {transform: translateX(-250px);}@media (max-width: 768px) {.title {font-size: 1.5rem;}.banner:hover .title {transform: translateX(-100px);}}</style>
</head>
<body>
<div class="banner"><h1 class="title">dangfulin, 一个啥都想学的家伙</h1>
</div>
</body>
</html>

1，将 lang 属性改为 “zh-CN”，因为内容是中文的。

2，在 <style> 中：
- 添加了 body { margin: 0; padding: 0; } 来移除默认边距。
- 优化了 .banner 的背景设置，使用 background: url(banner.png) no-repeat center/cover; 使背景图片居中并自适应。
- 使用 Flexbox 布局来居中标题：display: flex; justify-content: center; align-items: center;。
- 移除了 line-height 属性，因为现在使用 Flexbox 居中。
- 在 .title 中使用相对单位 rem 替代固定像素值，提高响应性。
- 优化过渡效果：transition: transform 0.5s ease;。

3，添加了媒体查询 @media (max-width: 768px) 来提高移动设备上的响应性：
- 在小屏幕上减小字体大小。
- 减小悬停时的位移距离。

4，在 HTML 结构中，移除了 <h1> 标签上不必要的 margin: 0;，因为我们已经在 CSS 中设置了。

相关文章：

CSS小玩意儿：文字适配背景

一&#xff0c;效果 二&#xff0c;代码 1&#xff0c;搭个框架 添加一张背景图片&#xff0c;在图片中显示一行文字。 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" conte…...

编程日记 2024/8/18 22:57:55

C++:平衡二叉搜索树之红黑树

一、红黑树的概念 红黑树&#xff0c; 和AVL都是二叉搜索树&#xff0c; 红黑树通过在每个节点上增加一个储存位表示节点的颜色&#xff0c; 可以是RED或者BLACK&#xff0c; 通过任何一条从根到叶子的路径上各个节点着色方式的限制&#xff0c;红黑树能够确保没有一条路径会比…...

编程日记 2024/8/18 22:54:51

CentOS 7 系统优化

CentOS 7 系统优化 1、配置YUM源 阿里云的YUM源配置&#xff1a; CentOS 7使用以下命令&#xff1a; sudo wget -O /etc/yum.repos.d/CentOS-Base.repo http://mirrors.aliyun.com/repo/Centos-7.repoCentOS 8使用以下命令&#xff1a; sudo wget -O /etc/yum.repos.d/CentOS…...

编程日记 2024/8/18 22:51:46

扫雷游戏——附源代码

扫雷游戏的源代码比较简单&#xff0c;不设计比较复杂的代码&#xff0c;主要是多个函数的组合&#xff0c;每个函数执行自己的功能&#xff0c;最终支持游戏的完成。 1.菜单 我们需要一个提醒信息来让用户进行选择。 void menu() {printf("***********************\n&…...

编程日记 2024/8/18 22:49:44

Vue3列表（List）

效果如下图&#xff1a;在线预览 APIs List 参数说明类型默认值bordered是否展示边框booleanfalsevertical是否使用竖直样式booleanfalsesplit是否展示分割线booleantruesize列表尺寸‘small’ | ‘middle’ | ‘large’‘middle’loading是否加载中booleanfalsehoverable是否…...

编程日记 2024/8/18 22:48:42

HarmonyOS NEXT - Navigation组件封装BaseNavigation

demo 地址: https://github.com/iotjin/JhHarmonyDemo 代码不定时更新&#xff0c;请前往github查看最新代码 在demo中这些组件和工具类都通过module实现了&#xff0c;具体可以参考HarmonyOS NEXT - 通过 module 模块化引用公共组件和utils 官方介绍 组件导航 (Navigation)(推…...

编程日记 2024/8/18 22:46:40

浅看MySQL数据库

有这么一句话&#xff1a;“一个不会数据库的程序员不是合格的程序员”。有点夸张&#xff0c;但是确是如此。透彻学习数据库是要学习好多知识&#xff0c;需要学的东西也是偏难的。我们今天来看数据库MySQL的一些简单基础东西&#xff0c;跟着小编一起来看一下吧。 什么是数据…...

编程日记 2024/8/18 22:44:36

Pytorch常用训练套路框架(CPU)

文章目录 1. 数据准备示例&#xff1a;加载 CIFAR-10 数据集 2. 模型定义示例&#xff1a;定义一个简单的卷积神经网络 3. 损失函数和优化器示例&#xff1a;定义损失函数和优化器 4. 训练循环示例&#xff1a;训练循环 5. 评估和测试示例&#xff1a;评估模型 6. 保存和加载模…...

编程日记 2024/8/18 22:41:31

C++ | Leetcode C++题解之第338题比特位计数

题目&#xff1a; 题解&#xff1a; class Solution { public:vector<int> countBits(int n) {vector<int> bits(n 1);for (int i 1; i < n; i) {bits[i] bits[i & (i - 1)] 1;}return bits;} };...

编程日记 2024/8/18 22:38:20

智慧校园云平台电子班牌系统源码，智慧教育一体化云解决方案

智慧校园云平台电子班牌系统&#xff0c;利用先进的云计算技术&#xff0c;将教育信息化资源和教学管理系统进行有效整合&#xff0c;实现生态基础数据共享、应用生态统一管理&#xff0c;为智慧教育建设的统一性&#xff0c;稳定性&#xff0c;可扩展性&#xff0c;互通性提供…...

编程日记 2024/8/18 22:37:18

数据库系统 第17节 数据仓库 案例赏析

下面我将通过几个具体的案例来说明数据仓库如何在不同的行业中发挥作用&#xff0c;并解决实际业务问题。 案例 1: 零售业 背景: 一家大型零售商希望改进其库存管理和市场营销策略&#xff0c;以提高销售额和顾客满意度。 解决方案: 数据仓库: 构建一个数据仓库&#xff0…...

编程日记 2024/8/18 22:36:15

硬件面试经典 100 题（71~90 题）

71、请问下图电路的作用是什么&#xff1f; 该电路实现 IIC 信号的电平转换&#xff08;3.3V 和 5V 电平转换&#xff09;&#xff0c;并且是双向通信的。 上下两路是一样的&#xff0c;只分析 SDA 一路&#xff1a; 1&#xff09; 从左到右通信&#xff08;SDA2 为输入状态&…...

编程日记 2024/8/18 22:34:12

【git】代理相关

问题&#xff1a; 开启了翻墙代理工具&#xff0c;拉取代码时报错&#xff1a;fatal: 无法访问 xxxx : Failed to connect to github.com port 443: 连接超时 解决&#xff1a; 0&#xff0c;取消代理仍然无法拉取 1&#xff0c;查看控制面板-网络与Internet-代理&#xff…...

编程日记 2024/8/18 22:32:10

golang gin框架中创建自定义中间件的2种方式总结 - func(*gin.Context)方式和闭包函数方式定义gin中间件

在gin框架中&#xff0c;我们可以通过2种方式创建自定义中间件&#xff1a; 1. 直接定义一个类型为 func(*gin.Context)的函数或者方法 这种方式是我们常用的方式&#xff0c;也就是定义一个参数为*gin.Context的函数或者方法。定义的方法就是创建一个 参数类型为 gin.Handler…...

编程日记 2024/8/18 22:29:05

Linux高级编程 8.13 文件IO

一、文件IO 操作系统为了方便用户使用系统功能而对外提供的一组系统函数。称之为 系统调用&#xff08;unistd.h&#xff09; 其中有个 文件IO&#xff0c;一般都是对设备文件操作,当然也可以对普通文件进行操作。 这是一个基于Linux内核的没有缓存的IO机制 文件IO特性&…...

编程日记 2024/8/18 22:28:03

【k8s】ubuntu18.04 containerd 手动从1.7.15 换为1.7.20

ubutnu18.04之前手动安装了1.7.15现在下载1.7.20containerd-1.7.20-linux-amd64.tar.gz root@k8s-worker-i58265u:/home/zhangbin# root@k8s-worker-i58265u:/home/zhangbin# https://github.com/containerd/containerd/releases/download/v1.7.20/containerd-1.7.20-linux-am…...

编程日记 2024/8/18 22:27:01

常用浮动方式

目录 一、标准流 二、float浮动 三、 flex浮动 3.1flex组成 3.2 主轴对齐方式 3.3侧轴对齐方式 3.4修改主轴方向 3.5弹性盒子换行 3.6行对齐方式 一、标准流 标签在网页中的默认排布规则 例如&#xff1a; 块元素独占一行、行内元素可以一行显示多个 二、float浮动 让块…...

编程日记 2024/8/18 22:19:48

设计模式反模式：UML常见误用案例分析

文章目录 设计模式反模式&#xff1a;UML常见误用案例分析1. 反模式概述2. 反模式的 UML 图示误用2.1 God Object 反模式2.2 Spaghetti Code 反模式2.3 Golden Hammer 反模式2.4 Poltergeist 反模式 3. 总结 设计模式反模式&#xff1a;UML常见误用案例分析 在软件工程领域&am…...

编程日记 2024/8/18 22:18:45

Python编码系列—Python SQL与NoSQL数据库交互：深入探索与实战应用

&#x1f31f;&#x1f31f; 欢迎来到我的技术小筑&#xff0c;一个专为技术探索者打造的交流空间。在这里&#xff0c;我们不仅分享代码的智慧&#xff0c;还探讨技术的深度与广度。无论您是资深开发者还是技术新手&#xff0c;这里都有一片属于您的天空。让我们在知识的海洋中…...

编程日记 2024/8/18 22:16:41

贪心算法---跳跃游戏

题目&#xff1a; 给你一个非负整数数组 nums &#xff0c;你最初位于数组的 第一个下标 。数组中的每个元素代表你在该位置可以跳跃的最大长度。 判断你是否能够到达最后一个下标&#xff0c;如果可以&#xff0c;返回 true &#xff1b;否则&#xff0c;返回 false 。 思路…...

编程日记 2024/8/18 22:13:37

CTF信息收集入门：从BUUCTF‘粗心的小李’题目看Git泄露的常见利用方式

CTF信息收集实战&#xff1a;Git泄露漏洞的深度利用与防御策略 在CTF竞赛的Web安全赛道上&#xff0c;信息收集能力往往决定着解题的成败。当新手面对看似空白的网页时&#xff0c;常会陷入无从下手的困境——这正是"粗心的小李"这类题目的设计初衷。不同于常规的SQL…...

编程新知 2026/3/28 3:11:13

小白必看！收藏这份Agent思维链技术指南，轻松入门大模型世界

小白必看&#xff01;收藏这份Agent思维链技术指南&#xff0c;轻松入门大模型世界 本文深入解析了Agent模型中的思维链技术&#xff0c;介绍了不同模型如Claude、Gemini等对思维链的不同称谓及其核心原理&#xff0c;即通过将思考内容带入上下文来提升多轮推理性能。文章对比了…...

编程新知 2026/3/28 1:29:45

ArcGIS Desktop绘图工具条实战：从基础图形到专业地图注记的进阶指南

1. ArcGIS绘图工具条初探&#xff1a;你的地图设计起点 第一次打开ArcGIS Desktop的绘图工具条时&#xff0c;我就像拿到了一盒全新的彩色铅笔。这个看似简单的工具条&#xff0c;实际上包含了从基础绘图到专业地图注记的全套功能。绘图工具条位于软件界面顶部&#xff0c;右键…...

编程新知 2026/3/28 1:15:39

移动端语音交互避坑指南：录音超时截取、倒计时提醒与MP3转换的完整方案

移动端语音交互避坑指南&#xff1a;录音超时截取、倒计时提醒与MP3转换的完整方案 在即时通讯和语音输入场景中&#xff0c;流畅的录音体验直接影响用户留存。数据显示&#xff0c;超过83%的用户会因为录音功能卡顿或操作复杂而放弃使用语音功能。本文将深入解析三个关键体验优…...

编程新知 2026/3/28 0:47:33

OpenClaw+ollama-QwQ-32B自动化测试：从用例生成到结果分析

OpenClawollama-QwQ-32B自动化测试&#xff1a;从用例生成到结果分析 1. 为什么选择OpenClaw做测试自动化 作为一个长期与测试代码打交道的开发者&#xff0c;我一直在寻找能够真正减轻重复劳动的解决方案。传统的测试框架虽然成熟&#xff0c;但编写和维护测试用例仍然占据了…...

编程新知 2026/3/28 0:01:11

告别调参玄学：手把手教你用‘黎卡提方程’为自动驾驶LQR控制器选择Q和R矩阵

自动驾驶轨迹跟踪实战&#xff1a;从黎卡提方程到LQR调参的工程化思考 当你在仿真环境中第一次看到自己设计的LQR控制器让车辆完美跟踪参考轨迹时&#xff0c;那种成就感难以言喻。但更多时候&#xff0c;我们面对的是震荡的超调曲线、缓慢的收敛速度&#xff0c;以及令人抓狂的…...

编程新知 2026/3/27 23:40:43

实战指南：在Kali Linux上构建HexStrike AI与Trae MCP的智能安全联动平台

1. 环境准备与基础配置 在Kali Linux上构建HexStrike AI与Trae MCP的智能安全联动平台&#xff0c;首先需要确保基础环境配置正确。我建议使用物理机直接安装Kali Linux&#xff0c;相比虚拟机方案能获得更好的性能表现&#xff0c;特别是在处理大规模安全扫描任务时。如果确实…...

编程新知 2026/3/27 23:18:38

Dark Reader实用指南：解决夜间浏览痛点的高效方案

Dark Reader实用指南&#xff1a;解决夜间浏览痛点的高效方案 【免费下载链接】darkreader Dark Reader Chrome and Firefox extension 项目地址: https://gitcode.com/gh_mirrors/da/darkreader 在数字时代&#xff0c;我们每天面对屏幕的时间越来越长&#xff0c;尤其…...

编程新知 2026/3/27 22:44:24

MacOS开发环境配置：OpenClaw+GLM-4.7-Flash联调指南

MacOS开发环境配置&#xff1a;OpenClawGLM-4.7-Flash联调指南 1. 为什么选择这个组合&#xff1f; 去年我在做一个自动化文档处理项目时&#xff0c;发现市面上的AI工具要么隐私性不足&#xff0c;要么灵活性太差。直到偶然接触到OpenClaw这个开源框架&#xff0c;才找到了理…...

编程新知 2026/3/27 21:19:48

SemanticKITTI数据集评测：DarkNet53Seg、PointNet++等模型谁更强？附复现代码

SemanticKITTI点云语义分割实战&#xff1a;模型选型与性能优化指南 点云语义分割技术正在重塑自动驾驶、机器人导航和三维场景理解等领域的研究范式。作为该领域最具挑战性的基准之一&#xff0c;SemanticKITTI数据集凭借其大规模、高密度标注和真实场景多样性&#xff0c;已成…...

编程新知 2026/3/27 21:01:44