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

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

news 2025/10/29 8:09:51

一，效果

在这里插入图片描述

二，代码

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

Python｜GIF 解析与构建（5）：手搓截屏和帧率控制

目录 Python&#xff5c;GIF 解析与构建&#xff08;5&#xff09;&#xff1a;手搓截屏和帧率控制 一、引言 二、技术实现&#xff1a;手搓截屏模块 2.1 核心原理 2.2 代码解析&#xff1a;ScreenshotData类 2.2.1 截图函数&#xff1a;capture_screen 三、技术实现&…...

编程新知 2025/9/19 8:02:57

应用升级/灾备测试时使用guarantee 闪回点迅速回退

1.场景 应用要升级,当升级失败时,数据库回退到升级前. 要测试系统,测试完成后,数据库要回退到测试前。 相对于RMAN恢复需要很长时间&#xff0c; 数据库闪回只需要几分钟。 2.技术实现 数据库设置 2个db_recovery参数 创建guarantee闪回点&#xff0c;不需要开启数据库闪回。…...

编程新知 2025/7/30 7:20:17

Spark 之 入门讲解详细版（1）

1、简介 1.1 Spark简介 Spark是加州大学伯克利分校AMP实验室&#xff08;Algorithms, Machines, and People Lab&#xff09;开发通用内存并行计算框架。Spark在2013年6月进入Apache成为孵化项目&#xff0c;8个月后成为Apache顶级项目&#xff0c;速度之快足见过人之处&…...

编程新知 2025/10/27 12:51:42

【Oracle APEX开发小技巧12】

有如下需求&#xff1a; 有一个问题反馈页面&#xff0c;要实现在apex页面展示能直观看到反馈时间超过7天未处理的数据&#xff0c;方便管理员及时处理反馈。 我的方法&#xff1a;直接将逻辑写在SQL中&#xff0c;这样可以直接在页面展示 完整代码&#xff1a; SELECTSF.FE…...

编程新知 2025/10/28 20:29:33

PHP和Node.js哪个更爽?

先说结论&#xff0c;rust完胜。 php&#xff1a;laravel&#xff0c;swoole&#xff0c;webman&#xff0c;最开始在苏宁的时候写了几年php&#xff0c;当时觉得php真的是世界上最好的语言&#xff0c;因为当初活在舒适圈里&#xff0c;不愿意跳出来&#xff0c;就好比当初活在…...

编程新知 2025/9/14 7:59:52

无法与IP建立连接，未能下载VSCode服务器

如题&#xff0c;在远程连接服务器的时候突然遇到了这个提示。 查阅了一圈&#xff0c;发现是VSCode版本自动更新惹的祸&#xff01;&#xff01;&#xff01; 在VSCode的帮助->关于这里发现前几天VSCode自动更新了&#xff0c;我的版本号变成了1.100.3 才导致了远程连接出…...

编程新知 2025/10/21 11:44:51

CentOS下的分布式内存计算Spark环境部署

一、Spark 核心架构与应用场景 1.1 分布式计算引擎的核心优势 Spark 是基于内存的分布式计算框架&#xff0c;相比 MapReduce 具有以下核心优势&#xff1a; 内存计算&#xff1a;数据可常驻内存&#xff0c;迭代计算性能提升 10-100 倍&#xff08;文档段落&#xff1a;3-79…...

编程新知 2025/10/24 18:08:42

React Native在HarmonyOS 5.0阅读类应用开发中的实践

一、技术选型背景 随着HarmonyOS 5.0对Web兼容层的增强&#xff0c;React Native作为跨平台框架可通过重新编译ArkTS组件实现85%以上的代码复用率。阅读类应用具有UI复杂度低、数据流清晰的特点。 二、核心实现方案 1. 环境配置 &#xff08;1&#xff09;使用React Native…...

编程新知 2025/8/19 2:57:37

linux 错误码总结

1，错误码的概念与作用 在Linux系统中，错误码是系统调用或库函数在执行失败时返回的特定数值，用于指示具体的错误类型。这些错误码通过全局变量errno来存储和传递，errno由操作系统维护，保存最近一次发生的错误信息。值得注意的是，errno的值在每次系统调用或函数调用失败时…...

编程新知 2025/9/16 22:48:47

今日科技热点速览

&#x1f525; 今日科技热点速览 &#x1f3ae; 任天堂Switch 2 正式发售 任天堂新一代游戏主机 Switch 2 今日正式上线发售&#xff0c;主打更强图形性能与沉浸式体验&#xff0c;支持多模态交互&#xff0c;受到全球玩家热捧 。 &#x1f916; 人工智能持续突破 DeepSeek-R1&…...

编程新知 2025/10/22 19:09:43