Question

附件是我想要的影响的图像。我试图用负边距来做这件事。我需要子元素扩展到顶部和底部的父元素。问题是父元素的背景颜色与子元素的高度匹配。这是一个响应式网站，我将无法使用子元素的绝对定位，因为子级的高度（因此父元素）将是可变的。任何帮助将不胜感激

以下是我的代码......

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

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>

Answer 2

您可以使用:after ID 中的:before和#parent个伪元素更改background-color，然后在#child中使用负边距{1}}。

检查此代码段：

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>

父母的背景颜色匹配具有负顶部和底部边距的孩子的高度

2 个答案: