html - 无法将图片置于背景中

Question

我一直在尝试让背景图片真正位于后面而不是前面。我试过使用 z-index，在 div 中定位 en 制作 div。但没有任何结果。

问题截图: https://gyazo.com/4e9ae692ce1280ba8ea0ec37cb54930b

上面的图片需要放在背景中，这样盒子的东西就可以放在前面。

HTML代码:

  <div id="image">
  <img src="DSC_0043.png" width="800" height="800">
  <div id="content">
  <div id="tabbox">-
  <div class="tab">

下面是实际内容，您当然不需要知道。它只是一堆文本等。

CSS代码:

 #image{
 position: relative;
 z-index: 2;
 } 

 #content{
 width: 75%;
 background-color: black;
 position: absolute;
 margin-left: 12.5%;
 padding-bottom: 5.5%;
 z-index: 1;
 }

Answer 1

使用纯 CSS，即使没有单独的 img 标签，您也可以实现背景图片。

尝试使用背景图像:

#content {
  /* Your CSS here... */
  background-image: url("DSC_0043.png"),
}

编辑:如果你想重复那个图像，你可以指定 background-repeat:

#content {
  background-image: url("DSC_0043.png"),
  background-repeat: repeat, /* Put no-repeat for non-repeating image */
}