代码之家  ›  专栏  ›  技术社区  ›  Osu

将不透明伪内容定位在相对定位的文本后面

  •  1
  • Osu  · 技术社区  · 9 年前

    我试图在一些文本后面放置一个不透明的黑色背景,但遇到了麻烦,因为文本总是在不透明的颜色后面。我不能使用z索引,因为文本相对定位,有人知道我如何使文本显示在不透明背景的顶部吗?

    JS小提琴

    http://jsfiddle.net/abtuj3xj/

    HTML格式

    <section class="primary" style="background-image: url('http://lorempixel.com/output/fashion-q-c-640-480-9.jpg');" data-bgimg="http://lorempixel.com/output/fashion-q-c-640-480-9.jpg">
        <div class="item">
            <article>
                <div class="entry">
                    <p>A whole bunch of text that goes on top of everything but is relatively positioned</p>
                </div>
                <div class="clear">&nbsp;</div>
            </article>
        </div> <!-- End div.item -->
        <p class="scroll-down">Scroll down</p>
    </section>
    

    CSS格式

    section {
        position:relative; text-align: center;
        background-repeat: no-repeat; background-size: cover;
        min-height:100%; color:#fff;
    }
    .item:after {
        content: ''; position:absolute; width:100%; height:100%; top:0; left:0;
        background-color:#000; opacity:0.3;
    }
    
    1 回复  |  直到 9 年前
        1
  •  0
  •   Adam Buchanan Smith Mateusz Mirkowski    9 年前

    我想我不明白你的问题,但还是值得一试。

    http://jsfiddle.net/DIRTY_SMITH/abtuj3xj/1/

    section {
        position:relative; text-align: center;
        background-repeat: no-repeat; background-size: cover;
        min-height:100%; color:#fff;z-index: -9999;
    }
    
    .item:after {
        content: ''; position:absolute; width:100%; height:100%; top:0; left:0;
        background-color:#000; opacity:0.3; z-index: -9999;
    }