如何给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 {&nbsp; float: left;&nbsp; width: 33.33%;&nbsp; padding: 5px;}.background {&nbsp; position: absolute;&nbsp; top: 0;&nbsp; left: 0;&nbsp; z-index: -1;}.background-anchor {&nbsp; position: relative;}<div class="col-lg-12 background-anchor">&nbsp; <img class="background" src="https://placekitten.com/1300/1300" alt="Change">&nbsp; <div class="img">&nbsp; &nbsp; <div class="column-img">&nbsp; &nbsp; &nbsp; <img src="https://placekitten.com/426/479" alt="" width="426" height="479">&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="column-img">&nbsp; &nbsp; &nbsp; <img src="https://placekitten.com/425/479" alt="" width="425" height="479">&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="column-img">&nbsp; &nbsp; &nbsp; <img src="https://placekitten.com/426/479" alt="" width="426" height="479">&nbsp; &nbsp; </div>&nbsp; </div></div>

Answer 2

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