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 中设置了。

相关推荐
前端Hardy16 小时前
12个被低估的 CSS 特性，让前端开发效率翻倍！
前端·javascript·css
前端Hardy16 小时前
HTML&CSS：精美的3D折叠卡片悬停效果
前端·javascript·css
光影少年18 小时前
css优化都有哪些优化方案
前端·css·rust
用户4582031531719 小时前
CSS无需JavaScript的交互效果实现
前端·css
咔咔一顿操作20 小时前
【CSS 3D 交互】打造沉浸式 3D 照片墙：结合 JS 实现拖拽交互
前端·javascript·css·3d·交互·css3
用户4582031531720 小时前
Flexbox布局上手：10分钟告别垂直居中难题
前端·css
霸气小男20 小时前
解决React中通过外部引入的css/scss/less文件更改antDesign中Modal组件内部的样式不生效问题
css·react.js
rannn_1111 天前
【Javaweb学习|实训总结|Week1】html基础，CSS（选择器、常用样式、盒子模型、弹性盒布局、CSS定位、动画），js（基本类型、运算符典例）
css·笔记·学习·html
β添砖java1 天前
CSS3核心技术
前端·css·css3
猫头虎-前端技术1 天前
浏览器兼容性问题全解：CSS 前缀、Grid/Flex 布局兼容方案与跨浏览器调试技巧
前端·css·node.js·bootstrap·ecmascript·css3·媒体
热门推荐
01conda中设置镜像地址（附所有可换的地址）02UV安装并设置国内源03A股预测还能更准？开源大模型Kronos带你跑通预测+回测全流程04突破百度网盘的下载限速，两种方法教会你【超详细】05KGG转MP3工具|非KGM文件|解密音频06UV 工具安装与国内镜像源配置指南07解决 WSL Ubuntu 中 /etc/resolv.conf 自动重置问题08GitHub 镜像站点09教你如何认证 Gemini 教育优惠的二次验证，薅个 1年的 Gemini Pro 会员1046个Nano-banana 精选提示词，持续更新中