Question

这是我的代码。如何在不使用position: absolute的情况下使红色背景显示在图上方？

感谢。

＆＃13;

article:nth-child(2) { margin-bottom: 1.5em; }

article figure { margin: 0; }

article header {
    background-color: red;
    padding: 2em 1.5em;
    margin: -5em 0 0;
    max-width: 72%;
    /*position: absolute;*/
    -webkit-box-sizing: content-box;
       -moz-box-sizing: content-box;
            box-sizing: content-box;
}

article p {
    font-size:1.4em;
    margin: 20px 0 0;
}

article p.author { font-size:1.6em; }

＆＃13;

<article>
  <figure>
    <img src="http://lorempixel.com/600/337">
  </figure>
  <header>
    <h1>This is a feature post with a three line title</h1>
    <p class="author"><em>By <a href="#">John Doe</a></em></p>
    <p>
      <a href="#">Continue</a>
      <span>11 min read</span>
    </p>
  </header>
</article>

＆＃13;

Answer 1

您不需要position:absolute ..您需要position:relative来重置＆＃34;由负利润率打扰的堆叠顺序。

article header {
  background-color: rgba(255,0,0,0.5);
  padding: 2em 1.5em;
  margin: -5em 0 0;
  max-width: 72%;
  position: relative; /* here */
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
}

＆＃13;

article:nth-child(2) {
  margin-bottom: 1.5em;
}
article figure {
  margin: 0;
}
article header {
  background-color: rgba(255,0,0,0.5);
  padding: 2em 1.5em;
  margin: -5em 0 0;
  max-width: 72%;
  position: relative;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
}
article p {
  font-size: 1.4em;
  margin: 20px 0 0;
}
article p.author {
  font-size: 1.6em;
}

＆＃13;

<article>
  <figure>
    <img src="http://lorempixel.com/600/337">
  </figure>
  <header>
    <h1>This is a feature post with a three line title</h1>
    <p class="author"><em>By <a href="#">John Doe</a></em>
    </p>
    <p>
      <a href="#">Continue</a>
      <span>11 min read</span>
    </p>
  </header>
</article>

＆＃13;

Answer 2

您可以将图像作为文章的背景图像或标题的另一个父容器。 http://jsfiddle.net/r8kqd9cn

article {
    background-image: url('http://lorempixel.com/600/337');
    padding: 10%;
}

<header>上的<header>文字

2 个答案: