如何在css中设置超过div顶部和底部的图像？

Question

我试图让图像超出 div 的底部和顶部。但我可以在底部做到这一点，我将如何在顶部做到这一点？

这里是在线fiddle.

.about {
  background-image: linear-gradient(100deg, #483dec, #4074eb);
}

.about img {
  width: 100%;
  margin-bottom: -100px;
}

.about .desc-section {
  margin: auto 0;
}

.about h2 {
  font-size: 24px;
  color: #ffffff;
}

.about p {
  font-size: 16px;
  line-height: 2;
  color: #ffffff;
}

<section class="about">
  <div class="container">
    <div class="row">
      <div class="col-6">
        <img src="https://images.unsplash.com/photo-1558981001-1995369a39cd?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80" alt="">
      </div>
      <div class="col-6 desc-section">
        <h2>This is heading</h2>
        <p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is.</p>
      </div>
    </div>
  </div>
</section>

Answer 1

您可以将position: relative 添加到.img 选择器并指定bottom: 30px 或您想要移动它的任何值。我在这个updated fiddle 的顶部和底部使用了30px。希望对你有帮助

.about {
    background-image: linear-gradient(100deg, #483dec, #4074eb);
    margin-top: 30px;
}

.about img {
    width: 100%;
    margin-bottom: -100px;
    position: relative;
    bottom: 30px;
}

.about .desc-section {
    margin: auto 0;
}

.about h2 {
    font-size: 24px;
    color: #ffffff;
}

.about p {
    font-size: 16px;
    line-height: 2;
    color: #ffffff;
}

Answer 2

/* add margin top for about section */
.about {
    background-image: linear-gradient(100deg, #483dec, #4074eb);
    margin-top: 100px;
}

/* change margin-bottom to margin-top for image */ 

.about img {
    width: 100%;
    margin-top: -100px;
}