使用 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

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

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

Answer 2

最好使用背景图片作为背景图片，您可以像下面这样缩短代码。这是 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 3

好的，现在可以使用了。我删除了 Bootstrap 并只使用了 flexbox。

弹性容器中的背景：

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

图片：

.image{

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

Answer 4

如果将 class 'd-flex' 和 'justify-content-center' 添加到父级 div，则可以使用 bootstrap，它们内置于 Bootstrap 4 classes

使用 Bootstrap 4 将图像置于另一图像之上

Centering an image on top of another one with Bootstrap 4

html

css

center

bootstrap-4