parent 的背景颜色与 child 的高度相匹配，上下边距为负

Question

附件是我想要的效果图。我正在尝试以负利润来做到这一点。我需要 child 元素来扩展超过顶部和底部的 parent 元素。问题是 parent 元素的背景颜色与 child 元素的高度匹配。这是一个响应式网站，我将无法使用 child 元素的绝对定位，因为 child（因此 parent 元素）的高度是可变的。任何帮助将不胜感激

以下是我的代码...

body {
  background-color:#DBD9DB;
}

#headerImage {
  margin: 0;
}

#headerImage img {
  display: block;
  margin: 0 auto;
}

#parent {
 background-color: #fff4d7;
}

#child {
 background:none #FFF;
 margin:-46px auto -38px;
 position:relative;
 text-align:center;
 width:80%;
}

<body>
  <div id="headerImage">
    <img src="http://fpoimg.com/300x250?text=Preview" width="300" height="250" />
  </div>
  <div id="parent">
    <div id="child">
      <h1>Title</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum dapibus sapien a nulla finibus mattis id quis est. Proin malesuada magna vitae orci maximus, ac viverra felis iaculis. Curabitur lacinia commodo est et auctor. Suspendisse potenti. Nulla scelerisque metus et leo cursus, non auctor turpis fermentum.</p>
    </div>
  </div>
</body>

Answer 1

你可以在#parent id中使用:after和:before伪元素来改变background-color然后在 #child.

中使用负边距

查看此代码段：

body {
    background-color:#DBD9DB;
}

#headerImage {
    margin: 0;
}

#headerImage img {
    display: block;
    margin: 0 auto;
}

#parent {
    background-color: #fff4d7;

}
#parent:before, #parent:after{
    content: " ";
    display: block;
    height: 50px;
    background-color: blue;
}

#child {
    background:none #FFF;
    position:relative;
    text-align:center;
    width:80%;
    margin: -50px auto;
}

<body>
  <div id="headerImage">
    <img src="http://fpoimg.com/300x250?text=Preview" width="300" height="250" />
  </div>
  <div id="parent">
    <div id="child">
      <h1>Title</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum dapibus sapien a nulla finibus mattis id quis est. Proin malesuada magna vitae orci maximus, ac viverra felis iaculis. Curabitur lacinia commodo est et auctor. Suspendisse potenti. Nulla scelerisque metus et leo cursus, non auctor turpis fermentum.</p>
    </div>
  </div>
</body>

Answer 2

body {
  background-color: #DBD9DB;
}


#parent {
  background-color: #fff4d7;
}

#parent:before,
#parent:after {
  content: " ";
  display: block;
  height: 50px;
  background-color: blue;
}

#child {
  background: none #FFF;
  position: relative;
  text-align: center;
  width: 80%;
  margin: -50px auto;
}

.parent {
  width: 100%;
  height: auto;
  margin: 0 auto 0 auto;
  background-color: #b5b5b5;
  overflow: hidden;
  position: relative;
}


img {
    width: 100%;
    height: auto;
}

.clearfix {
  overflow: auto;
  zoom: 1;
}

<body>
  <div class="parent clearfix">
    <div class="css-slideshow">
          <div id="parent">
                        <img class="clearfix" src="http://unilaboralgirona.com/wp-content/uploads/2015/03/ZContact.jpg" />
      <div id="child">
        <h1>Title</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum dapibus sapien a nulla finibus mattis id quis est. Proin malesuada magna vitae orci maximus, ac viverra felis iaculis. Curabitur lacinia commodo est et auctor. Suspendisse potenti.
          Nulla scelerisque metus et leo cursus, non auctor turpis fermentum.</p>
      </div>
    </div>
    </div>
  </div>
</body>

parent 的背景颜色与 child 的高度相匹配，上下边距为负

background color of parent matching height of child with negative top and bottom margins

html

css

margin