Question

我在背景图像上面有一个文本，该文本需要是z-index -1。但是当我这样做时，文本会出现在背景图像下面。所以你再也看不到文字了。有没有办法给背景图像一个z-index。如果没有，还有另一种方法可以看到背景图像上方的文本，而它是z-index -1。

谢谢你，如果你可以帮助我:)。

HTML

<div class="text">
    <h1>TEST</h1>
</div>
<div class="test">

</div>

CSS

 .test {
    height:9000px;
    width:100%;
    background-color:red;
    margin-top:50px;
    z-index:10;
}

    h1 {
        position:fixed;
        margin-top:-50px;
        z-index:1;
    }

编辑：https://jsfiddle.net/6pjmw7wv/ 在jsfiddle我得到一个例子，当你向下滚动文本需要在红色下面但是如何？

EDIT2：https://jsfiddle.net/06ht2fp8/ 这是一个更好的例子，如果你仍然不明白文本需要保持在蓝色之上但是在红色之下。

Answer 1

如果我理解你想要什么，你可以将h1的z-index改为-1：

https://jsfiddle.net/gt9z8svL/

.test {
    height:9000px;
    width:100%;
    background-color:red;
    margin-top:50px;
    z-index:10;
}

h1 {
    position:fixed;
    margin-top:-50px;
    z-index:-1;
}

评论中你的小提琴的答案： https://jsfiddle.net/d0b2Ldue/

只需在div的类

中添加position:relative;和z-index:10即可

.test1 {
    height:9000px;
    width:100%;
    background-color:red;
  position:relative;
  z-index:10;
}

Answer 2

这可能会对您有所帮助 -

<div class='image-container'>
<span> Text Over Image </span>
</div>


.image-container
{
  background-image:url("http://images5.fanpop.com/image/photos/30800000/-Random-random-30843840-1920-1080.jpg");
  height:500px;
  width:500px;
}

span
{
  font-size:25px;
  color:#ffffff;
}

<强>的jsfiddle - https://jsfiddle.net/codecore/d4s6yktf/1/

z-index和背景图像问题

HTML

2 个答案: