子比主题美化分享：首页科技感 Banner 教程，让你的文字像悬浮在图片上一样清晰立体

缘起：一个被多次“接力”的优秀样式

这个 Banner 样式起初是我在逛网站时偶然看中的，经过我不懈努力，终于在子比官方论坛找到了源码。据分享者子墨介绍，这个模块最早是张洪 Heo 大佬的原创作品，后来被几位大佬接力扒过来改了两版。

它最吸引我的地方在于：适配了移动端，还做好了右侧的今日推荐文章卡片。虽然原作者只给了简单的 HTML 和 CSS，但在我的研究下，把它重新封装成了一个更好用的配置方案。

痛点：为什么你照搬的代码不好看？

在实际配置过程中，我发现原版代码有两个非常致命的体验缺陷：

• 文字“自杀”现象：由于背景图是不确定的，一旦你上传一张浅色背景图，白色的文字就会和背景融为一体，完全看不清。

• “黑遮罩”毁所有：我也试过在图片底部加一层黑色渐变遮罩，但那样会直接吃掉背景图的细节，显得非常沉闷，一点都不清透。

二改方案：灵感来自剪片子的“三重投影法”

为了保住背景图的清透感，我放弃了全屏遮罩，转而对文字应用了我在做自媒体剪视频时常用的“三重投影”方案：

说人话就是在文字下面加阴影，但是代码肯定没有剪映那么简单就是了原理就是

这样修改后的效果非常惊艳：背景图 100% 展现，而文字无论在多杂乱、多亮的背景下，都能保持极高的识别度。

保姆级实操：一步步带你做出同款美化

即便你没有用子主题，直接在子比主主题里也能轻松搞定。

第一步：添加 CSS 样式
注入添加 CSS 样式进入 子比主题设置 -> 自定义代码 -> 自定义 CSS 样式，填入以下优化后的代码：

/* --- 首页多功能 Banner 核心样式 (文字强化版) --- */
#home_top { max-width: 1400px; margin: auto; margin-top: .5rem; padding: 0 1.5rem; width: 100% }
.recent-top-post-group { border-radius: 12px; overflow: hidden; width: 100%; }
.recent-post-top { display: flex; flex-direction: row; width: 100%; }

/* 左侧 Banner 及动态图标 */
#bannerGroup { display: flex; width: calc(100% - 600px - 2rem); margin-right: 0.5rem; flex-direction: column; }
#banners { display: flex; width: 100%; height: 328px; background: #fff; border-radius: 12px; position: relative; overflow: hidden; }
.banners-title { top: 2rem; left: 1.5rem; position: absolute; display: flex; flex-direction: column; z-index: 2; }
.banners-title-big { font-size: 36px; font-weight: bold; line-height: 1.2; }

/* 动态图标动画 */
.tags-group-all { display: flex; transform: rotate(-30deg); }
.tags-group-wrapper { display: flex; animation: rowup 60s linear infinite; }
@keyframes rowup { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* 右侧今日卡片文字增强 (核心二改部分) */
.topGroup .todayCard .todayCard-info .todayCard-tips,
.topGroup .todayCard .todayCard-info .todayCard-title {
    color: #ffffff !important;
    font-weight: 800 !important;
    /* 三重阴影法：近景锐化 + 中景扩散 + 远景光晕 */
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9), 0 5px 15px rgba(0, 0, 0, 0.6), 0 0 30px rgba(0, 0, 0, 0.4) !important;
}
.todayCard-cover { position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-size: cover; z-index: -1; }

/* 移动端兼容性 */
@media screen and (max-width: 1200px) {
    #bannerGroup, .topGroup { width: 100%; }
    #home_top { display: block; padding: 0 10px; }
}

第二步：添加 HTML 小工具
进入 外观 -> 小工具，在 首页内容顶部 拖入一个 “自定义 HTML” 小工具，粘贴以下结构

<div id="home_top">
    <div class="recent-top-post-group">
        <div class="recent-post-top">
            <div id="bannerGroup">
                <div id="banners" style="background:#fff; height:328px; border-radius:12px; overflow:hidden; position:relative;">
                    <div class="banners-title" style="top:2rem; left:1.5rem; position:absolute; z-index:2;">
                        <div class="banners-title-big">分享思路</div>
                        <div class="banners-title-big">与科技生活</div>
                        <div class="banners-title-small">Yhanzhi.com</div>
                    </div>

                    <div class="tags-group-all" style="display:flex; transform:rotate(-30deg);">
                        <div class="tags-group-wrapper" style="display:flex; animation: rowup 60s linear infinite;">
                            
                            <div class="tags-group-icon-pair" style="margin-left:1rem;">
                                <div class="tags-group-icon" style="background:#989bf8; width:120px; height:120px; border-radius:30px; margin-bottom:1rem; display:flex; align-items:center; justify-content:center;">
                                    <img src="你的Logo地址1.png" style="width:60%;">
                                </div>
                                <div class="tags-group-icon" style="background:#4082c3; width:120px; height:120px; border-radius:30px; display:flex; align-items:center; justify-content:center;">
                                    <img src="你的Logo地址2.png" style="width:60%;">
                                </div>
                            </div>

                            <div class="tags-group-icon-pair" style="margin-left:1rem;">
                                <div class="tags-group-icon" style="background:#f7cb4f; width:120px; height:120px; border-radius:30px; margin-bottom:1rem; display:flex; align-items:center; justify-content:center;">
                                    <img src="你的Logo地址3.png" style="width:60%;">
                                </div>
                                <div class="tags-group-icon" style="background:#8f55ba; width:120px; height:120px; border-radius:30px; display:flex; align-items:center; justify-content:center;">
                                    <img src="你的Logo地址4.png" style="width:60%;">
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>

            <div class="topGroup" style="width:600px; height:328px; position:relative;">
                <div class="todayCard" style="width:100%; height:100%; border-radius:12px; overflow:hidden;">
                    <div class="todayCard-info" style="position:absolute; bottom:2.5rem; left:2.5rem; z-index:2;">
                        <div class="todayCard-tips">行动才是根本</div>
                        <div class="todayCard-title">生活明朗 万物可爱</div>
                    </div>
                    <div class="todayCard-cover" style="background: url('你的背景图.jpg') no-repeat center /cover"></div>
                </div>
            </div>
        </div>
    </div>
</div>

好啦，这就是今天的分享，如果你觉得有用，请收藏我的网站，带你解锁更多子比美化姿势！

我会继续折腾更多好玩的代码和设计细节分享给大家，大家在配置过程中要是遇到什么问题，欢迎在评论区给我留言哈！