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

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

一,效果

在这里插入图片描述

二,代码

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…...

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

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

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…...

扫雷游戏——附源代码

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

Vue3列表(List)

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

HarmonyOS NEXT - Navigation组件封装BaseNavigation

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

浅看MySQL数据库

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

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

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

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;} };...

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

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

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

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

硬件面试经典 100 题(71~90 题)

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

【git】代理相关

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

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

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

Linux高级编程 8.13 文件IO

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

【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…...

常用浮动方式

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

设计模式反模式: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…...

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

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

贪心算法---跳跃游戏

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

实测Taotoken在低功耗arm7设备上的API调用延迟与稳定性表现

&#x1f680; 告别海外账号与网络限制&#xff01;稳定直连全球优质大模型&#xff0c;限时半价接入中。 &#x1f449; 点击领取海量免费额度 实测Taotoken在低功耗arm7设备上的API调用延迟与稳定性表现 1. 测试背景与目的 在边缘计算或资源受限的嵌入式场景中&#xff0c;…...

【权威发布】Midjourney V6结构提示词标准白皮书(含官方未公开的4类语法优先级矩阵与37个避坑节点)

更多请点击&#xff1a; https://intelliparadigm.com 第一章&#xff1a;Midjourney V6结构提示词的核心演进与范式变革 Midjourney V6 标志着生成式图像模型在语义理解与结构化表达上的重大跃迁。其提示词&#xff08;prompt&#xff09;系统不再仅依赖关键词堆叠&#xff0…...

3步解决AKShare金融数据接口stock_zh_a_spot_em异常:完整数据获取指南

3步解决AKShare金融数据接口stock_zh_a_spot_em异常&#xff1a;完整数据获取指南 【免费下载链接】aktools AKTools is an elegant and simple HTTP API library for AKShare, built for AKSharers! 项目地址: https://gitcode.com/gh_mirrors/ak/aktools AKTools作为一…...

LaTeX-PPT:PowerPoint公式编辑效率提升400%的终极解决方案

LaTeX-PPT&#xff1a;PowerPoint公式编辑效率提升400%的终极解决方案 【免费下载链接】latex-ppt Use LaTeX in PowerPoint 项目地址: https://gitcode.com/gh_mirrors/la/latex-ppt 还在为PowerPoint中编辑复杂数学公式而头痛吗&#xff1f;LaTeX-PPT这款开源插件将彻…...

告别手动PPT制作:用JavaScript实现自动化演示文稿生成

告别手动PPT制作&#xff1a;用JavaScript实现自动化演示文稿生成 【免费下载链接】PptxGenJS Build PowerPoint presentations with JavaScript. Works with Node, React, web browsers, and more. 项目地址: https://gitcode.com/gh_mirrors/pp/PptxGenJS 还在为每周重…...

将随身WiFi变身微型服务器:基于高通410芯片刷入Debian实战

1. 为什么选择高通410随身WiFi改服务器&#xff1f; 去年我在整理抽屉时翻出三个闲置的随身WiFi设备&#xff0c;突然想到&#xff1a;这些搭载高通410芯片的小玩意&#xff0c;能不能变成微型Linux服务器&#xff1f;经过两周的折腾&#xff0c;不仅成功刷入Debian系统&#x…...

信号处理中的‘双子星’:深入对比周期信号的离散谱与非周期信号的连续谱(附Sinc函数详解)

信号处理中的‘双子星’&#xff1a;深入对比周期信号的离散谱与非周期信号的连续谱&#xff08;附Sinc函数详解&#xff09; 在信号处理领域&#xff0c;周期信号与非周期信号的频谱分析构成了整个傅里叶分析体系的两大支柱。许多学习者在初次接触这两个概念时&#xff0c;往往…...

SIGLENT SDS2000示波器核心技术解析与应用

1. SIGLENT SDS2000系列超荧光示波器深度解析作为一名电子测试测量行业的老兵&#xff0c;当我第一次接触到SIGLENT SDS2000系列示波器时&#xff0c;那种惊艳感至今记忆犹新。这款2013年发布的设备在当时堪称国产示波器的里程碑之作&#xff0c;其110,000 wfs/s的波形捕获率和…...

AI法律助手:基于RAG与LLM的垂直领域应用实践

1. 项目概述&#xff1a;当AI遇见法律&#xff0c;一个开源法律助手的诞生最近在GitHub上看到一个挺有意思的项目&#xff0c;叫imyuanx/ai-lawyer。光看名字&#xff0c;你大概就能猜到它的方向——一个AI驱动的法律助手。作为一名在技术和应用交叉领域摸爬滚打多年的从业者&a…...

Cursor智能体工具包:从代码助手到自主编程代理的进化

1. 项目概述&#xff1a;从“智能代码补全”到“自主编程代理”的进化如果你和我一样&#xff0c;在过去一两年里深度使用过Cursor&#xff0c;那么你对它的第一印象大概率是“一个集成了AI的现代化代码编辑器”。它确实把智能代码补全、聊天式编程和代码理解做到了一个新高度&…...