Question

我想要一个带有一些文字的div。在那个div我也想要一个匹配相同位置和比例的div。我在stackoverflow上发现了很多东西，但是只要事情不同，它就不适用于我。

现在，我再也看不到文字了。为什么？如果解决方案不会影响'#container'的css，那就太好了。

HTML：

<div id="container">
    <p>Somt text to screw with me</p>
    <div class="background-img"></div>
</div>

的CSS：

#container {
    position: fixed;
    left: 10px;
    top: 30px;
    width: 100px;
    height: 50px;
    background: red;
}

p {
   color: blue; 
}


.background-img {
    position: absolute;
    background-size: cover;
    background-repeat: none;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: url(http://lorempixel.com/420/255);    
}

为小提琴手： https://jsfiddle.net/clankill3r/8kaLj2su/

Answer 1

将z-index: -1添加到您的背景图片。

https://jsfiddle.net/8kaLj2su/2/

Answer 2

正确的做法是根本不使用z-index

更改元素的逻辑顺序：

<div id="container">
    <div class="background-img"></div>
    <p>Somt text to screw with me</p>
</div>

而不是简单地将p设置为亲戚：

＆＃13;

#container {
    position: fixed;
    left: 10px;
    top: 30px;
    width: 100px;
    height: 50px;
    background: red;
}

p {
   color: blue; 
    position:relative;
}

.background-img {
    position: absolute;
    background: url(http://lorempixel.com/420/255) 50% / cover;
    width: 100%;
    height: 100%;
}

＆＃13;

<div id="container">
    <div class="background-img"></div>
    <p>Somt text to screw with me</p>
</div>

＆＃13;

Answer 3

p {
   color: blue; 
z-index:1;
position:relative;
}

基本上Z-index：1会将文本推到最顶层，而且在大多数情况下，z-index必须使用Position。如果你有任何关于该div的文本，我也不会建议使用-1，这也可能是隐藏的。

Answer 4

如果您想查看带有文字的背景图片：

https://jsfiddle.net/xeyw0hvc/

代码：

#container {
position: fixed;
left: 10px;
top: 30px;
width: 100px;
height: 50px;
background: red;
z-index:10;
}

p {
color: blue; 
}


.background-img {
position: absolute;
background-size: cover;
background-repeat: none;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: url('http://lorempixel.com/420/255');
z-index:-1;    
}

Answer 5

使用z-index选择覆盖另一个元素的元素。

工作示例：（JSFiddle）

#container {
    position: fixed;
    left: 10px;
    top: 30px;
    width: 100px;
    height: 50px;
    background: red;
}

p {
   color: blue; 
    z-index:2;
    position:relative;
}


.background-img {
    position: absolute;
    background-size: cover;
    background-repeat: none;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: url(http://lorempixel.com/420/255); 
    z-index:1;
}

<div id="container">
    <p>Somt text to screw with me</p>
    <div class="background-img"></div>
</div>

Answer 6

p {
    color: blue;
    z-index: 9999;
}

Answer 7

使用z-index，像其他人一样建议没问题。但是我发现z-indexing有点儿错误，特别是在老版IE等传统浏览器上。我会采用不同的方法。更改标记的顺序，使父容器位置：相对，然后使两个子元素位置：绝对。这样你就可以完全避免使用z-index。

像这样：https://jsfiddle.net/4x5nkwgb/

HTML

<div id="container">
    <div class="background-img"></div>
    <p>Somt text to screw with me</p>
</div>

CSS

#container {
    position: relative;
    left: 10px;
    top: 30px;
    width: 100px;
    height: 50px;
    background: red;
}

p {
    color: blue; 
    position:absolute;
    top:0;
    left:0;
    display:block;
}


.background-img {
    position: absolute;
    background-size: cover;
    background-repeat: none;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: url(http://lorempixel.com/420/255);    
}

无法获得包装div

7 个答案: