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

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

news 文章来源：https://blog.csdn.net/dangfulin/article/details/141234216 2025/5/9 20:06:35

一，效果

在这里插入图片描述

二，代码

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

利用EditPlus进行Json数据格式化

利用EditPlus进行Json数据格式化 git下载地址&#xff1a;https://github.com/michael-deve/CommonData-EditPlusTools.git (安装过editplus的直接将里面的json.js文件复制走就行) 命令&#xff1a;Cscript.exe /nologo “D:\Program Files (x86)\EditPlus 3\json.js” D:\P…...

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

xss.function靶场(easy)

文章目录 第一关Ma Spaghet!第二关Jefff第三关Ugandan Knuckles第四关Ricardo Milos第五关Ah Thats Hawt第六关Ligma第七关Mafia第八关Ok, Boomer 网址&#xff1a;https://xss.pwnfunction.com/ 第一关Ma Spaghet! 源码 <!-- Challenge --> <h2 id"spaghet&qu…...

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

【LLM入门】Let‘s reproduce GPT-2 (124M)【完结，重新回顾一下，伟大！】

文章目录 03:43:05 SECTION 4: results in the morning! GPT-2, GPT-3 repro03:56:21 shoutout to llm.c, equivalent but faster code in raw C/CUDA【太牛了ba】03:59:39 summary, phew, build-nanogpt github repo 03:43:05 SECTION 4: results in the morning! GPT-2, GPT-…...

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

c语言----取反用什么符号

目录 前言 一、逻辑取反 二、按位取反 三、应用场景 前言 在C编程语言中&#xff0c;取反使用符号!表示逻辑取反&#xff0c;而使用~表示按位取反。 其中&#xff0c;逻辑取反!是将表达式的真值&#xff08;非0值&#xff09;转换为假&#xff08;0&#xff09;&#xff0c…...

编程日记 2024/8/18 21:58:17

【html+css 绚丽Loading】 - 000003 乾坤阴阳轮

前言&#xff1a;哈喽&#xff0c;大家好&#xff0c;今天给大家分享htmlcss 绚丽Loading&#xff01;并提供具体代码帮助大家深入理解&#xff0c;彻底掌握&#xff01;创作不易&#xff0c;如果能帮助到大家或者给大家一些灵感和启发&#xff0c;欢迎收藏关注哦 &#x1f495…...

编程日记 2024/8/18 21:57:16

【Web】巅峰极客2024 部分题解

目录 EncirclingGame GoldenHornKing php_online admin_Test EncirclingGame 玩赢游戏就行 GoldenHornKing 利用点在传入的app 可以打python内存马 /calc?calc_reqconfig.__init__.__globals__[__builtins__][exec](app.add_api_route("/flag",lambda:__i…...

编程日记 2024/8/18 21:56:14

在AMD GPU上进行Grok-1模型的推理

Inferencing with Grok-1 on AMD GPUs — ROCm Blogs 我们展示了如何通过利用ROCm软件平台&#xff0c;能在AMD MI300X GPU加速器上无缝运行xAI公司的Grok-1模型。 介绍 xAI公司在2023年11月发布了Grok-1模型&#xff0c;允许任何人使用、实验和基于它构建。Grok-1的不同之处…...

编程日记 2024/8/18 21:54:11

在亚马逊云科技上部署开源大模型并利用RAG和LangChain开发生成式AI应用

项目简介&#xff1a; 小李哥将继续每天介绍一个基于亚马逊云科技AWS云计算平台的全球前沿AI技术解决方案&#xff0c;帮助大家快速了解国际上最热门的云计算平台亚马逊云科技AWS AI最佳实践&#xff0c;并应用到自己的日常工作里。 本次介绍的是如何在亚马逊云科技上利用Sag…...

编程日记 2024/8/18 21:53:09

Spring——Bean的生命周期

Bean的生命周期牵扯到Bean的实例化、属性赋值、初始化、销毁 其中Bean的实例化有四种方法、构造器实例化、静态工厂、实例工厂、实现FactoryBean接口 对于Bean的生命周期我们可以在Bean初始化之后、销毁之前对Bean进行控制 两种方法&#xff1a; 一、配置 1、在Bean的对象…...

编程日记 2024/8/18 21:51:07

云计算实训30——自动化运维(ansible)

自动化运维 ansible----自动化运维工具 特点&#xff1a; 部署简单&#xff0c;使用ssh管理 管理端与被管理端不需要启动服务 配置简单、功能强大&#xff0c;扩展性强 一、ansible环境搭建 准备四台机器 安装步骤 mo服务器&#xff1a; #下载epel [rootmo ~]# yum -y i…...

编程日记 2024/8/18 21:50:04