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对齐在中间。

当我将BG / IMG放到主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>

弹性包装盒在IMG

1 个答案: