Question

我一直试图让背景图片实际上在后面，而不是在前面。我试过z-index，定位在div中制作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标记，也可以实现背景图像。

尝试使用background-image：

#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 */
}

Answer 2

如果您希望该图片落后于其他所有内容，则应尝试使用background-size: cover; 我不太了解你的问题，我希望这会对你有所帮助。

Answer 3

对代码进行轻微修改，您可以使用css完成此操作。我使用谷歌的图像显示这个，但解释我有两个div嵌套。

父div content设置背景图像并调整其自身的位置。

子div box包含文本及其自身的宽度和高度。

css background-image: url ("path/to/image")和background-repeat: no-repeat使这成为可能。请随意操纵我给出的示例，以增加您的理解。

#content {
width: 100%;
height: 100%;
  background-image: url('https://images-na.ssl-images-amazon.com/images/I/61xo5qJF0nL._SY355_.jpg');
  background-repeat: no-repeat;
  position: absolute;
  margin-left: 12.5%;
  padding-bottom: 5.5%;
  z-index: 1;
}
#box{
width: 350px;
height: 150px;
color: purple;
}

<div id="content">
  <div id="box">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam accumsan turpis diam, non dictum dui mollis eu. Aliquam erat volutpat. Phasellus faucibus bibendum felis a posuere. Maecenas sit amet neque a sem mattis ornare sed vel mauris. Mauris vel semper nisl. Aliquam erat volutpat. Suspendisse potenti. Proin vulputate bibendum nulla, sit amet placerat arcu viverra in. Duis ultricies risus quis venenatis hendrerit. Sed elit lorem, suscipit at odio in, mollis dignissim dolor. Nulla a sem nec dolor consequat sodales. Nullam risus velit, venenatis nec quam in, tincidunt maximus velit. Cras lacus ex, pellentesque vel sapien quis, condimentum vulputate sapien. Maecenas at pellentesque lacus. Mauris ac ligula quam. Integer leo est, vulputate sed pulvinar ut, consequat vel risus.

Phasellus lectus neque, rutrum sit amet nisi eget, imperdiet scelerisque mauris. Nam elementum pretium sem ut sollicitudin. Cras in finibus eros. Aliquam sit amet metus vitae tellus vehicula pretium. Etiam vestibulum congue luctus. In quis auctor mi, sit amet tempor metus. Sed ex massa, porta a magna et, molestie vestibulum ipsum.

Sed congue, ligula non fringilla scelerisque, risus massa fermentum tortor, ornare feugiat justo massa molestie nisi. Ut id efficitur lacus. Duis ullamcorper mi nec tristique fermentum. Donec pellentesque vel massa et commodo. Integer semper gravida vulputate. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Mauris at urna hendrerit, blandit ligula nec, dapibus erat. Aliquam ullamcorper orci nec quam euismod, sed mollis purus volutpat.

Proin at velit ut nunc mattis sodales a id ante. Aliquam a lacinia odio. Vivamus vel vulputate magna. Duis iaculis scelerisque tincidunt. Sed cursus leo vitae libero efficitur venenatis. Fusce suscipit dui nibh, nec tristique sem sodales ut. Quisque ac blandit lorem, pretium ullamcorper orci. Vivamus posuere ligula neque, at laoreet nibh semper consectetur. Duis suscipit sollicitudin quam sed volutpat. Proin tellus neque, porta id rutrum nec, posuere at nibh. Fusce venenatis efficitur metus, quis feugiat metus imperdiet et.

Sed aliquam viverra finibus. Vestibulum gravida a tortor et tempus. Aliquam at tortor purus. Maecenas malesuada magna justo. Aenean elementum sagittis aliquam. Donec lobortis id orci id pharetra. In non purus vitae erat fermentum condimentum non nec metus.</div>
</div>

无法将图片放在后台

3 个答案: