html - 背景图像覆盖页面上的文本

Question

背景图像覆盖了页面上的文本。任何帮助，将不胜感激。在我的主页上:

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

<div id="bg">
  <img src="http://placehold.it/600x150" width="100%" height="200%" alt="">
</div>

<h1> Welcome to the home page </h1>

Answer 1

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

    #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>