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

一,效果

二,代码

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

相关推荐
青皮桔10 小时前
CSS实现百分比水柱图
前端·css
失落的多巴胺10 小时前
使用deepseek制作“喝什么奶茶”随机抽签小网页
javascript·css·css3·html5
牧杉-惊蛰12 小时前
uniapp微信小程序css中background-image失效问题
css·微信小程序·uni-app
哎呦你好14 小时前
【CSS】Grid 布局基础知识及实例展示
开发语言·前端·css·css3
islandzzzz14 小时前
(第二篇)HMTL+CSS+JS-新手小白循序渐进案例入门
前端·javascript·css·html
晴殇i16 小时前
CSS 迎来重大升级:Chrome 137 支持 if () 条件函数,样式逻辑从此更灵活
前端·css·面试
Hilaku16 小时前
2025年,每个前端都应该了解的CSS选择器:`:has()`, `:is()`, `:where()`
前端·css
sunbyte17 小时前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | DragNDrop(拖拽占用组件)
前端·javascript·css·vue.js·vue
旷世奇才李先生17 小时前
CSS 安装使用教程
前端·css
遗憾随她而去.17 小时前
深入理解CSS中的BFC 与IFC , 布局的两大基础概念
前端·css