文章/答案/技术大牛

发布

问如何设置div的背景图像
EN

Stack Overflow用户

提问于 2020-03-26 08:08:18

回答 2查看 96关注 0票数 0

我有3个水平对齐的图像。我为对齐图像设置了背景图像(背景图像)，如下所示。当我运行我的代码时，背景图像在图像上流动。我希望三个对齐的图像出现在背景图像的顶部。我试着使用无法工作的box-shadow。我不希望背景图像跨越任何三个对齐的图像。请问我该怎么做？

<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;
}

html

css

回答 2

Stack Overflow用户

回答已采纳

发布于 2020-03-26 08:17:03

嗯，所以你想让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>

票数 2

Stack Overflow用户

发布于 2020-03-26 08:15:12

css：

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

这是在css中放置背景图像的正确方法，可以从：W3school获得更多信息。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/60863082

复制

相似问题

问如何设置div的背景图像
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何设置div的背景图像EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何设置div的背景图像
EN