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

dangfulin2024-08-22 2:04

一，效果

二，代码

1，搭个框架

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

html 复制代码 
<!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，添加动画

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

html 复制代码 
<!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 属性。

html 复制代码 
<!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 优化交互：向鼠标移入方向偏移。

html 复制代码 
<!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，代码简化：

html 复制代码 
<!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 中设置了。

相关推荐
DarkBule_18 分钟前
0成本get可信域名：dpdns.org公益域名获取全攻略
css·学习·html·github·html5
营赢盈英2 小时前
How to detect if ＜html＞ tag has a class in child Angular component
前端·javascript·css·html·angular.js
！win ！2 小时前
从一个按钮实例入门CSS in JS之styled-components
css·react
xw52 小时前
从一个按钮入门CSS in JS之styled-components
css·react.js
青衫码上行2 小时前
【JavaWeb学习 | 第二篇】CSS(1) - 基础语法与核心概念
前端·css·学习
重铸码农荣光3 小时前
用 CSS 动画实现情侣小球互动：从基础布局到高级动效的完整思路
css·html
Qinana3 小时前
💖用 CSS 打造会“亲吻”的动画小球
前端·css
华仔啊14 小时前
这个Vue3旋转菜单组件让项目颜值提升200%！支持多种主题，拿来即用
前端·javascript·css
天才测试猿16 小时前
Selenium定位元素的方法css和xpath的区别
css·自动化测试·软件测试·python·selenium·测试工具·测试用例
社恐的下水道蟑螂19 小时前
前端小彩蛋：纯 CSS 实现情侣小球互动，甜到齁的代码我扒下来了
css
热门推荐
01GitHub 镜像站点02BongoCat - 跨平台键盘猫动画工具03UV安装并设置国内源04Linux下V2Ray安装配置指南05GitLab 零基础入门指南：从安装到项目管理全流程06NVIDIA显卡驱动、CUDA、cuDNN 和 TensorRT 版本匹配指南07安娜的档案(Anna’s Archive) 镜像网站/国内最新可访问入口（持续更新）08jdk21下载、安装（Windows、Linux、macOS）09在VSCode配置Java开发环境的保姆级教程（适配各类AI编程IDE）10Labelme从安装到标注：零基础完整指南