Question

我有一个带有白色背景的内容div和一个带有灰色背景的页脚。身体背景颜色为浅灰色。

<body>
    <div class="content">
        <p>Content Div</p>
    </div>
    <footer class="site-footer">
          <nav>
              <ul>
                  <li>Item 1</li>
                  <li>Item 2</li>
                  <li>Item 3</li>
                  <li>Item 4</li>
              </ul>
          </nav>
    </footer>
</body>

页脚有一个顶部2px边框。我的问题是我想改变边框下方的背景颜色。基本上，我希望在边框正下方有一个25像素的区域，以匹配身体的背景颜色。

这是JSFiddle

所以，我希望它变成白色，浅灰色，边框，浅灰色，深灰色。

相反，它目前是白色，浅灰色，边框，深灰色。

这可能吗？

非常感谢任何帮助。

Answer 1

您无法指定填充颜色，但可以使用:after实现此目的：

.site-footer {
     /** Don't forget to add this property **/
     position: relative;
}

.site-footer:after {
    background-color: #F00;
    content: '';
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    z-index: 1;
    height: 25px;
}

这里是JSFiddle

我使用了红色，以便您可以清楚地看到它的放置位置。

MDN docs for :after

Answer 2

我认为您可能会为您的行使用<hr />标记 - 我相信这会更容易，而且就像语义一样，因为它是各个部分之间的中断。

或者，我对Catalin有类似的想法，但我使用:before的伪边框。

.site-footer {
  position: relative;
  border-top: 25px solid #EBEEEE;
  background-color: #818181;
  color: white;
  padding: 30px 30px;
}

.site-footer:before {
  content: " ";
  position: absolute;
  z-index: 5;
  top: -25px;
  left: 0;
  right:0;
  border-top: 2px dotted #999;
}

这是jsfiddle

HTML / CSS - 改变填充区域的颜色

2 个答案: