如何用Bootstrap 5实现内外堆叠Span的展示区设计？

我需要在Bootstrap 5.3中实现一种特定的堆叠Span设计：一个Span在容器外，一个在容器内，并且要放在展示区上方。

原展示区代码 #

<div class="showcase d-flex flex-column">

    <div class="container p-4">
        <div class="row showcase-row mt-5 gap-lg-0 gap-5">
            <div class="col-lg-4 col-12 showcase-item">
                <h4>BMW 420i</h4>
                <h5>M Sport</h5>
                <img src="/app/static/img/togg art.png" alt="">
            </div>
            <div class="col-lg-4 col-12 showcase-item">
                <h4>Mercedes-Benz GLB</h4>
                <h5>200 AMG</h5>
                <img src="/app/static/img/8.png" alt="">
            </div>
            <div class="col-lg-4 col-12 showcase-item">
                <h4>Audi E-Tron GT</h4>
                <h5>GT Quattro</h5>
                <img src="/app/static/img/9.png" alt="">
            </div>
            <div class="col-lg-4 col-12 showcase-item">
                <h4>Ferrari F8</h4>
                <h5>Tributo</h5>
                <img src="/app/static/img/4.png" alt="">
            </div>
            <div class="col-lg-4 col-12 showcase-item">
                <h4>Lamborghini Aventador</h4>
                <h5>LP750-4</h5>
                <img src="/app/static/img/5.png" alt="">
            </div>
            <div class="col-lg-4 col-12 showcase-item">
                <h4>Aston Martin Vantage</h4>
                <h5>V8 Vantage Roadster</h5>
                <img src="/app/static/img/6.png" alt="">
            </div>
        </div>
    </div>
    
</div>

我当前的解决方案 #

<span class="text-uppercase fw-bold position-absolute" style="font-size: 210px; opacity: 0.1;">owcase</span>

<div class="showcase container p-4 d-flex flex-column" style="margin-top: 100px;">

    <span class="fs-3 fw-bold">Showcase</span>
    <span class="fs-5 fw-bold" style="opacity: 0.4;">Ads</span>
    
</div>

优化实现思路 #

以下是几个更符合Bootstrap规范、更易维护的优化方向：

• 替换内联样式为Bootstrap工具类：把内联的font-size、opacity、margin-top换成Bootstrap原生工具类，比如用opacity-10替代内联透明度设置，mt-5或自定义间距类替代margin-top:100px，减少结构内的样式冗余。
• 添加相对定位父容器：当前绝对定位的span会相对于整个文档流定位，容易出现布局偏移。给展示区的父容器添加position-relative，让背景文本相对于展示区容器定位，更可控。
• 用伪元素简化结构：把大字号的"owcase"背景文本用CSS伪元素实现，减少HTML中的冗余元素，实现样式与结构分离。

优化后代码示例 #

<div class="showcase position-relative d-flex flex-column mt-5">
    <div class="container p-4 d-flex flex-column">
        <div class="showcase-header">
            <span class="fs-3 fw-bold">Showcase</span>
            <span class="fs-5 fw-bold opacity-40">Ads</span>
        </div>
        
        <!-- 原展示区商品列表 -->
        <div class="row showcase-row mt-5 gap-lg-0 gap-5">
            <!-- 商品项内容（同原代码） -->
        </div>
    </div>
</div>

对应的自定义CSS：

.showcase::before {
    content: "owcase";
    position: absolute;
    top: 0;
    left: 0;
    font-size: 210px;
    font-weight: 700;
    text-transform: uppercase;
    opacity: 0.1;
    z-index: 0;
}
.showcase-header {
    position: relative;
    z-index: 1; /* 确保标题在背景文本上方 */
}

这种实现方式既保留了设计效果，又让代码更整洁、易维护，同时契合Bootstrap的设计理念。

内容的提问来源于stack exchange，提问作者GoekhanDev