Question

我有两个div。一个带有图像，一个带有背景（半透明）和文本。最后一个div我给出了css margin-top：-25px来重叠。但是第一个div中的图像位于半透明背景和最后一个div的文本之间。

div.polaroid {
  width: 80%;
  background-color: white;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  margin-bottom: 25px;
}

div.container {
  background-color: rgba(255,0,0,0.7);
  text-align: center;
  padding: 10px 20px;
  margin-top: -50px;
}
<div class="polaroid">
<img src="http://originalen.com/fileadmin/user_upload/skov.jpg" alt="Norway" style="width:100%">
<div class="container">
  <p>The Troll's tongue in Hardanger, Norway</p>
</div>

https://jsfiddle.net/Donslund/bsdk804p/1/

Answer 1

＆＃13;

<div class="polaroid">
<img src="http://originalen.com/fileadmin/user_upload/skov.jpg" alt="Norway" style="width:100%">

<div class="container">
  <p>The Troll's tongue in Hardanger, Norway</p>
</div>
    </div>

＆＃13;

这里它与你想要的重叠（我假设）。

CSS图像放错了地方

1 个答案: