使用 CSS 实现双色文字效果【CSS基础入门100例】

IT技术视界

2025-3-12

CSS视界技术博客

关注IT技术视界公众号，获取好玩有趣软件！先领1T空间！再存有趣资源！仅有一次机会！

在网页设计中，我们可以利用 CSS 进行层叠样式，实现一半颜色不同的文字。这种方式可以用于标题、Logo 或特殊装饰效果。

🎨 效果展示

下方示例文字的上半部分显示为橙色，下半部分显示为绿色。

诗与远方

📌 完整代码

你可以复制下面的 HTML + CSS 代码，直接在网页中使用：

<!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>
        p {
            font-family: "微软雅黑";   /* 设置字体 */
            font-size: 80px;   /* 设置文字大小 */
            color: green;    /* 设置文字颜色 */
            text-align: center;  /* 设置文字居中 */
            position: relative;  /* 让子元素的绝对定位相对于p */
            display: inline-block;
        }

        .half {
            height: 60px;    /* 设置元素高度，限制上半部分可见范围 */
            position: absolute;  /* 绝对定位 */
            overflow: hidden;    /* 隐藏溢出部分内容 */
            color: orange;  /* 设置上半部分文字颜色 */
            top: 0;
            left: 0;
            width: 100%;
        }
    </style>
</head>
<body>
    <p>
        <span class="half">诗与远方</span>诗与远方
    </p>
</body>
</html>

📖 代码解析

双色效果
- <span class="half">诗与远方</span> 负责显示 橙色部分（上半部分）。
- 诗与远方 负责显示 绿色部分（完整文字）。
- 由于 half 部分 隐藏了下半部分的文字，它的上半部分与完整的文字重叠，形成双色效果。
overflow: hidden;
- 隐藏超出部分，让 .half 只显示上半部分的橙色文字，从而达到一半颜色不同的视觉效果。
position: absolute;
- 让 .half 绝对定位，与完整文字完全重叠。
适配不同的文字
- 你可以修改 font-size 和 height 来适配不同的文字大小。

🚀 结语

通过 overflow: hidden 和 绝对定位，可以巧妙地实现双色文字效果。这种方法简单实用，可以用于多种创意网页设计场景！🎉✨

版权声明 1 本文章标题：使用 CSS 实现双色文字效果【CSS基础入门100例】
2 本文章地址： https://www.itlooker.cn/8541.html
3 软件无法使用，软件和谐，网盘失效，找资源，欢迎留言或者加群交流！
4 如无特别说明本文即为本站 原创文章，仅代表个人观点，版权归 IT技术视界 所有！未经授权, 公众号平台请勿转载！个人自媒体可在保留链接情况下进行转载!
5 下载类资源版权争议与本站无关。您必须在下载后的24个小时之内，从您的电脑或手机中彻底删除。
6 本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长进行 删除处理

THE END

使用CSS实现制作镂空文字效果的网页【CSS基础入门100例】

<<上一篇

使用CSS实现文字阴影效果【CSS基础入门100例】

下一篇>>