使用Bootstrap 4将图像置于另一个图像的顶部

Question

我想这样做（我的脸代替白圈）

但是当我尝试的时候，我的脸就会消失。

这是代码

`<div class="container-fluid no-padding">
        <div class="row">
             <div class="col-12">
                <img src="img/ordinateur.jpg" class="img-fluid" alt="Responsive image">
                    <div class="row">
                        <div class="col-12">
                            <img src="img/moi.png" class="img-fluid">
                        </div>
                    </div>
            </div>
        </div>
    </div>`

Answer 1

如果您使用背景图片作为背景图片，它会更好，您可以缩短您的代码，如下所示。以下是Codepen版本：http://codepen.io/johnsackson/pen/GdpNoQ

  <div class="container no-padding">
    <div class="row background-img vmiddle">
      <div class="col-12 text-center">
        <img src="http://www.efusionsoft.com/ready2go/assets/2013/09/500x500-490x490.gif" class="img-fluid">
      </div>
    </div>
  </div>

样式：

.background-img {
  background: url(https://www.ledr.com/colours/red.jpg)
    0 0 no-repeat;
  width: 100%;
  height: 800px;
}

.vmiddle {
  display: flex;
  align-items: center;
}

希望这就是你要找的东西。

Answer 2

如果您添加课程，则可以使用bootstrap＆＃39; d-flex＆＃39;和＆＃39;证明 - 内容中心＆＃39;对于父div，它们是在Bootstrap 4类

中构建的

Answer 3

没有编码 有很多方法可以解决这个问题。我经常使用的（它是最简单的）是使用照片编辑器简单地编辑图像并将面部粘贴在中间，并使用该图像作为背景。

使用编码另一种方法如下所示。您所要做的就是查看作为每个元素属性的CSS样式，并将它们复制到您的网站中。 http://simpodex.com/stackoverflowcontent/imageonimagetest.html

Answer 4

好的，现在它正在运作。 我删除了Bootstrap，只使用了flexbox。

Flex容器中的背景：

.container{
display: flex;
height: 300px;
background-image: url("../ordinateur.jpg");
}

图片：

.image{

width: 150px;
height: 150px;
margin: auto; /* center the image in the container */}