弹性框在 IMG 后面添加 BG/IMG

Question

我想在图像底部添加一个效果。

这可以通过创建背景或当我尝试在后面添加另一个图像来完成。

标记

<div class="a">
<div class="container">
<h2>Title</h2>
<img class="imgA1" src="http://placehold.it/200x200">
<img class="imgB1" src="http://placehold.it/200x200/ff0000">
</div>
</div>

.CSS

.container {display: flex; position:relative; justify-content: center;     align-items: center;}
h2 {position:absolute; z-index: 2;}
.imgA1 { position:absolute; top: 8px; left: 0px; } 
.imgB1 { position:relative; bottom: 0px; left:  0px;} 

http://jsfiddle.net/62c8zxjh/

背景将具有不同的颜色，并可用作图像的阴影。

我想响应式地将 H2、imgA1、imgA2 对齐在中间。

当我在主 IMG 后面获得 BG/IMG 时，如果我放大或响应式测试，它不起作用。

Answer 1

如果没有显示您想要的结果的图像，这更像是一种猜测，但这是你的意思吗？

.container {
position: relative;
}
.container img {
width: 100%;
}
.imgA1 {
position: absolute;
top:8px;
}
.content-container {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
position: absolute;
top:0;
left: 0;
width: 100%;
}

<div class="container">
<img class="imgA1" src="http://placehold.it/200x200">
<img class="imgB1" src="http://placehold.it/200x200/ff0000">
<div class="content-container">
<h2>
Title
</h2>
</div>
</div>