如何给div设置背景图片

Question

我有 3 个水平对齐的图像。我为对齐的图像设置了背景图像（背景图像），如下所示。当我运行代码时，背景图像会覆盖图像。我希望 3 个对齐的图像出现在背景图像的顶部。我尝试使用box-shadow它无法工作。我不希望背景图像跨越 3 个对齐图像中的任何一个。请问我该怎么做？超文本标记语言<div class="col-lg-12">    <img src="images/background.png" alt="Change">    <div class="img">        <div class="column-img">            <img src="/images/pic.jpg" alt="" width="426" height="479">        </div>        <div class="column-img">            <img src="/images/pic.jpg" alt="" width="425" height="479">        </div>        <div class="column-img">            <img src="/images/change.jpg" alt="" width="426" height="479">        </div>    </div></div>CSS//how I align my 3 images horizontally..column-img {    float: left;    width: 33.33%;    padding: 5px;}

Answer 1

嗯，所以您希望 background.png 出现在其他图像后面？如果您坚持将其包含在 DOM 中，则需要将其从文档流中删除。像这样的东西：

.column-img {

  float: left;

  width: 33.33%;

  padding: 5px;

}

.background {

  position: absolute;

  top: 0;

  left: 0;

  z-index: -1;

}

.background-anchor {

  position: relative;

}

<div class="col-lg-12 background-anchor">

  <img class="background" src="https://placekitten.com/1300/1300" alt="Change">

  <div class="img">

    <div class="column-img">

      <img src="https://placekitten.com/426/479" alt="" width="426" height="479">

    </div>

    <div class="column-img">

      <img src="https://placekitten.com/425/479" alt="" width="425" height="479">

    </div>

    <div class="column-img">

      <img src="https://placekitten.com/426/479" alt="" width="426" height="479">

    </div>

  </div>

</div>

Answer 2

CSS：

.img {
   background-image: url('../images/pic.jpg');
}