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

最新推荐文章于 2024-08-17 22:24:13 发布
最新推荐文章于 2024-08-17 22:24:13 发布
阅读量852 收藏 17
点赞数 21
分类专栏： CSS 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dangfulin/article/details/141234216
版权

一，效果

在这里插入图片描述

二，代码

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

dangfulin
关注
  • 21
    点赞
  • 踩
  • 17
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
微信小程序：view/text/image
chb47100的博客
11-20 757
微信小程序：view/text/image eg: <!--.WXML内书写--> <view> rpx </view> /* pages/demo2/demo2.wxss */ /* 1 小程序中 不需要主动来引入样式文件 2 需要把页面中某些元素的单位 由px改为rpx 1 设计稿 750px = 750 rpx 1 px = 1 rpx 2 把屏幕宽度改成375px 375px = 750 px 1 px = 2 rpx
微信小程序从入坑到放弃二十二：完美兼容安卓和ios手机的底部评论框
yilingsj的博客
06-20 1270
摘要： 不管是在普通的H5页面还是在微信小程序中，底部输入框一直是一大难题，因为键盘会在某些情况下遮挡信输入框一部分！值得庆幸的是：在微信小程序中，我们可以通过监听bindfocus来获取键盘的高度，动态算出输入框距离屏幕顶部的距离…
h5 字体大小自适应纯css解决方案
热门推荐
IT_ZGC的博客
04-14 1万+
viewpoint CSS3提供了一些与当前viewpoint相关的元素，vw，vh，vim等。 “viewpoint” = window size vw = 1% of viewport width 1vh = 1% of viewport height 1vmin = 1vw or 1vh, 最小 1vmax = 1vw or 1vh, 最大 兼容性：chrome 20+/ s
CSS学习笔记
wqslqsllo的博客
10-14 459
1 介绍 1 css是w3c推出的标准 2 版本 css1, css2, css3 3 css是什么 网页分成三个部分： 结构(HTML) 表现(CSS) 行为(JavaScript) CSS - 层叠样式表 - 网页实际上是一个多层的结构，通过CSS可以分别为网页的每一个层来设置样式 而最终我们能看到只是网页的最上边一层 - 总之一句话，CSS用来设置网页中元素的样式
字体大小高度html vw,字体大小自适应纯css解决方案【转】
weixin_39688870的博客
06-09 698
viewpo遇新是直朋能到分览intcss3提供了一些与当前viewpo遇新是直朋能到分览int相关的元素，vw，vh，vim等。“viewpo遇新是直朋能到分览int” = window sizevw = 1% of viewport width1vh = 1% of viewport height1vmin = 1vw or 1vh, 最小1vmax = 1vw or 1vh, 最大兼容性：c...
Hexo设置少量固定的动态背景图
ordinary_brony的博客
02-04 906
在以前的这篇文章(https://blog.csdn.net/ordinary_brony/article/details/108025636)中，我们设置了一些动态背景。这次我们加一丁点优化，为下一次做准备。
CSS3自适应字体大小(vw vh)
weixin_33916256的博客
05-04 567
viewpoint css3提供了一些与当前viewpoint相关的元素，vw，vh，vmin, vmax等。 “viewpoint” = window size vw = 1% of viewport width 1vh = 1% of viewport height 1vmin = 1vw or 1vh, 最小 1vmax = 1vw or 1vh, 最大 兼容性：c...
字体大小自适应纯css解决方案
weixin_34315189的博客
07-04 86
viewpoint css3提供了一些与当前viewpoint相关的元素，vw，vh，vim等。 “viewpoint” = window size vw = 1% of viewport width 1vh = 1% of viewport height 1vmin = 1vw or 1vh, 最小 1vmax = 1vw or 1vh, 最大 兼容性：chrome 2...
《吐血整理》系列 大厂前端组件库工具集合（PC端、移动端、JS、CSS等）
油墨香^-^的博客
03-21 931
Coding 应当是一生的事业，而不仅仅是 30 岁的青春饭本文已收录，欢迎 Star，持续更新上一篇《吐血整理》系列 大厂前端必备工具集合（抓包、调试、Mock 数据等等）发布之后，很多小伙伴问怪怪有没有大厂前端开发工具组件库的集合，今天，它来了，它踏着七彩祥云来了！！！本文已收录，欢迎 Star，持续更新上一期的《吐血整理》系列 大厂前端必备工具集合（抓包、调试、Mock 数据等等），获得大家一致好评，于是怪怪我加班加点，写下了这一期。
css实现背景半透明文字不透明的效果示例
09-24
总结来说，通过CSS的`rgba()`函数和合理的颜色搭配，我们可以轻松实现背景半透明而文字不透明的效果。在实际应用中，可以根据需求调整颜色值和透明度，以适应不同的设计风格和品牌要求。同时，保持良好的代码习惯，...
css控制文字前的小图标具体写法
09-25
除了使用元素外，还有其他方法可以实现文字前的小图标效果，比如使用列表元素和，并给元素设置相应的背景图像。这种方法的优点是能够保持列表的语义清晰，便于搜索引擎的索引和屏幕阅读器的读取。 在设计图标的时候...
HTML5+CSS3小实例：纯CSS实现文字组成肖像特效
12-26
HTML5+CSS3小实例：纯CSS实现文字组成肖像特效
CSS改变网页中鼠标选中文字背景颜色例子
09-25
标题中提到的“CSS改变网页中鼠标选中文字背景颜色例子”，指出了CSS不仅可以用来改变网页的结构层次和内容的外观，还可以用来增强网页的交互性和视觉吸引力。通过CSS，我们可以改变用户选中（即用鼠标高亮）网页...
css3 3D立体动感文字和放射背景动画特效
06-11
这款纯CSS3实现的3D立体动感文字和放射背景动画特效，不仅展现了CSS3的强大功能，还为网页设计带来了极具视觉冲击力的效果。 首先，3D立体效果是CSS3中的一个重要组成部分，通过`transform`属性实现。`transform`...
CSS的重绘和重排是什么？
沐爸的博客
08-12 1072
CSS的重绘和重排是什么？它俩有什么区别？如何对重绘和重排进行优化？快来一起看看吧！
CSS相关修改样式、伪类样式
2301_80034711的博客
08-15 960
3.background-repeat:背景图片平铺方式，值repeat重复填充，no-repeat不重复。值用空格隔开，分别设置x，y方向的相对位置。2.background-image：标签背景图片，使用url（）函数，引入文件地址。使用rgb（）函数，范围0-255，如rgb（255,255,255），分别表示红，绿，蓝。4.background-size：背景图片在标签中的大小，若图片比标签大，部分图片会缺失。3.选择器nth-child（)：通过简单数字公式，正序只更改选择器匹配中的元素。
PHP 实战：动态更改 CSS 值
withkai44的博客
08-15 167
在上面的代码中，我们首先设定了一个变量 $userFontSize 来模拟获取用户设置的字体大小，然后通过 echo 函数将 CSS 样式输出到页面中。除了直接在服务器端输出或生成 CSS 文件外，还可以结合 JavaScript 来动态更改样式。这种方式更为灵活，可以根据用户的行为实时更改样式。如果需要更改的样式较多，我们也可以选择生成一个新的 CSS 文件。直接输出 CSS 样式。生成新的 CSS 文件。
CSS的:placeholder-shown伪类：精确控制输入框占位符样式
最新发布
2402_85758349的博客
08-17 661
伪类代表的是一个输入字段（或元素）在其内显示占位符文本的状态。当输入框为空且占位符可见时，这个伪类就生效。这对于创建更丰富的表单样式和交互效果非常有用。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值