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

Posted 2023-03-06

【中文标题】如何在css中设置超过div顶部和底部的图像？

【英文标题】：How to set an image that will exceed a div top and bottom in css?

【发布时间】：2019-12-14 15:57:31

【问题描述】：

我试图让图像超出 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" >
      </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>

【参考方案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;

【参考方案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;

【讨论】：

有什么区别？为什么这是正确答案？请描述您的解决方案。