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

相关推荐
华仔啊4 小时前
Vue3+CSS 实现的 3D 卡片动画,让你的网页瞬间高大上
前端·css
在云端易逍遥5 小时前
前端必学的 CSS Grid 布局体系
前端·css
进阶的鱼5 小时前
(4种场景)单行、多行文本超出省略号隐藏
前端·css·面试
石金龙20 小时前
[译] Composition in CSS
前端·css
天天扭码21 小时前
来全面地review一下Flex布局(面试可用)
前端·css·面试
用户4582031531721 小时前
CSS特异性:如何精准控制样式而不失控?
前端·css
会豪1 天前
CSS 动画属性精讲:从基础到实战
前端·css
前端Hardy2 天前
HTML&CSS: 谁懂啊!用代码 “擦去”图片雾气
前端·javascript·css
前端Hardy2 天前
HTML&CSS:好精致的导航栏
前端·javascript·css
墨渊君2 天前
“蒙”出花样!用 CSS Mask 实现丝滑视觉魔法
前端·css