Question

背景图片覆盖了页面上的文字。任何帮助，将不胜感激。在主页上我有：

＆＃13;

    #bg {
      position: fixed;
      top: 1em;
      right: 30%;
      bottom: 0;
      left: 30%;
      margin: 0 -600px;
      background-size: cover;
    }

＆＃13;

<div id="bg">
  <img src="http://placehold.it/600x150" width="100%" height="200%" alt="">
</div>

<h1> Welcome to the home page </h1>

＆＃13;

Answer 1

您可以z-index: -1使用#bg元素

    #bg {
      position: fixed;
      top: 1em;
      right: 30%;
      bottom: 0;
      left: 30%;
      margin: 0 -600px;
      background-size: cover;
      z-index: -1;
    }

<div id="bg">
  <img src="http://placehold.it/600x150" width="100%" height="200%" alt="">
</div>

<h1> Welcome to the home page </h1>

Answer 2

只需为元素应用z-index：

#bg {
  position: fixed;
  top: 1em;
  right: 30%;
  bottom: 0;
  left: 30%;
  margin: 0 -600px;
  background-size: cover;
  z-index: 1;
}
h1 {
  z-index: 5;
  position: relative;
}

<div id="bg">
  <img src="http://placehold.it/600x150" width="100%" height="200%" alt="">
</div>

<h1> Welcome to the home page </h1>

Answer 3

尝试将图片设置为div上的背景，如下所示：

#bg {
    background-image: url('http://placehold.it/600x150');
}

当然，您应该从img内删除div。

Answer 4

bg { 
  background: url(images/bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

这有助于CSS技巧。

Answer 5

建议的解决方案是使用z-index属性。

将它添加到您的CSS代码并确保它是负值，因此默认情况下它会落后于所有内容。因此，对于您的#bg ID，它会像：

#bg {
   z-index: -999;
}

这应该可以解决问题！

在页的背景图象覆盖物文本

5 个答案: