Z-index 不适用于背景图像

发布于 2024-12-29 16:56:10 字数 624 浏览 0 评论 0原文

对于以下 CSS -

.competition .banner .image {
    background: url("{{ STATIC_URL }}images/comp-banner.jpg") no-repeat;
    display: inline-block;
    position: relative;
}

和 HTML -

    <div class="banner">
        <span class='image'>
        </span>
    </div>

    <div class="info">
        <div class="main-info">
            {{ competition.description }}
        </div>
    </div>

我无法弄清楚如何将 description 放在背景图像之上。我尝试为所有 div、span 等设置 Z 索引，但似乎没有任何效果。我如何将文本放在背景图像之上？

原文

For the following CSS -

.competition .banner .image {
    background: url("{{ STATIC_URL }}images/comp-banner.jpg") no-repeat;
    display: inline-block;
    position: relative;
}

And HTML -

    <div class="banner">
        <span class='image'>
        </span>
    </div>

    <div class="info">
        <div class="main-info">
            {{ competition.description }}
        </div>
    </div>

I cannot figure how to put the description on top of the background-image. I've tried setting the Z-index for all the div's, span's, etc. but nothing seems to work. How would I put the text on top of the background image here?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

二智少女猫性小仙女 2025-01-05 16:56:11

但描述在main-info里面...设置position:relative到主div和position:absolute; z-index: 50 给孩子...这应该可以做到，而不是仅仅做一些 top,bottom... 保持在应该的位置

.info {
    background: url("{{ STATIC_URL }}images/comp-banner.jpg") no-repeat;
    display: inline-block;
    position: position absolute;
}
.main-info{
position: relative; z-index: 50;
}

    <div class="info">
        <div class="main-info">
            {{ competition.description }}
        </div>
    </div>

but the description is inside main-info... set position: relative to the main div and position: absolute; z-index: 50 to the child... this should do it, than just do some top,bottom... to stay where it should

.info {
    background: url("{{ STATIC_URL }}images/comp-banner.jpg") no-repeat;
    display: inline-block;
    position: position absolute;
}
.main-info{
position: relative; z-index: 50;
}

    <div class="info">
        <div class="main-info">
            {{ competition.description }}
        </div>
    </div>

回复收藏 0 原文

~没有更多了~