Question

有什么好方法可以在顶部背景上弹出图像（深灰色框），同时仍将空白填充到背景框的末端？

https://github.com/squaremo/amqp.node/issues/259#issuecomment-230165144

Answer 1

类似这样

.container {
position: relative; 
z-index: 0; 
}

.overlap {
  position: absolute;
  z-index: 100;
  max-height: 100% 100vh; // or whatever you want
  background: url(), no-repeat center center; // if you want it as a bg image
  background-size: cover;
}

Answer 2

很难以一种不太笨拙的方式来做到这一点，这样的事情如何工作？

为文本创建一列，为图像创建一列。

给图像列position:relative，然后将图像放到底部减去容器填充的底部。

.offset-container {
  padding-top: 80px;
}

.container {
  width: 400px;
  display: flex;
  flex-direction: row-reverse;
  background-color: #dedede;
  padding: 30px;
}

.text-box {
  width: 46%
}

.image-container {
  width: 46%;
  padding-right: 8%;
  position: relative;
}

.image-offset {
  position: absolute;
  z-index: 1;
  bottom: -30px;
}

.responsive-image {
  max-width: 100%;
  height: auto;
}

<div class="offset-container">
  <div class="container">
    <div class="text-box">
      <h3>Title Here</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque scelerisque facilisis neque vitae scelerisque. Vestibulum ante ipsum primis in faucibus</p>
    </div>
    <div class="image-container">
      <img class="image-offset responsive-image" src="http://placehold.it/200x360">
    </div>
  </div>
</div>

Answer 3

假设您已经创建了两列，一列用于图像，一列用于文本，在图像上使用变换比例并添加位置或负底边距以将图像与容器对齐

image {
    transform: scale(1.2);
    position: relative;
    top: -30px;
}

CSS使图像显示在div之外

3 个答案: