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

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

news 2026/5/15 20:41:23

一，效果

在这里插入图片描述

二，代码

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>

用 background-image 添加了一张图片。
然后结合 background-repeat: no-repeat; 设置了图片的展示方式。
通过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>

用 transform 指定一个平移效果。
然后用 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小玩意儿：文字适配背景

一，效果

二，代码

1，搭个框架

2，添加动画

3，产生色差

三，优化

相关文章：

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

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

CentOS 7 系统优化

扫雷游戏——附源代码

Vue3列表（List）

HarmonyOS NEXT - Navigation组件封装BaseNavigation

浅看MySQL数据库

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

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

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

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

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

【git】代理相关

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

Linux高级编程 8.13 文件IO

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

常用浮动方式

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

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

贪心算法---跳跃游戏

终极免费风扇控制软件：如何让你的电脑既安静又凉爽

告别网盘下载烦恼：3步解锁9大网盘高效下载新体验

在Taotoken控制台中查看与分析API用量明细的实际操作

告别浏览器卡顿：如何用Play-with-MPV解锁网页视频专业播放体验

RPG Maker终极视差地图插件：零代码打造专业级多层场景

从PI到PR：静止坐标系下永磁同步电机电流控制的新范式

别再手动写CSS了！用Vue3 + Tailwind CSS 5分钟搞定一个响应式卡片组件

构建工程化提示词库：提升AI开发效率与代码质量

16nm FinFET与3D-IC设计验证的技术突破与应用

英特尔®oneAPI 数学内核库（oneMKL）在Windows上的高效部署与VS2022集成指南