HTML/CSS - 更改填充区域的颜色答案

【问题标题】：HTML/CSS - Change Color of Padded AreaHTML/CSS - 更改填充区域的颜色
【发布时间】：2015-06-08 06:08:14
【问题描述】：

我有一个带有白色背景的内容 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>

页脚有一个顶部 2 像素的边框。我的问题是我想更改边框下方的背景颜色。基本上，我想要边框正下方约 25px 的区域来匹配主体的背景颜色。

这是JSFiddle

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

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

这可能吗？

非常感谢任何帮助。

【问题讨论】：

您以复杂的方式解释，而是发布预期结果的屏幕截图/模型。
您可以在fotter中使用背景图片，1px宽，25px高，以所需的颜色，水平重复，放置在顶部。
您是否考虑过使用带边距的水平线，并将其设置为虚线和您想要的颜色？

标签： html css

【解决方案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

【讨论】：

谢谢它的工作，但是当我把它放在我的网站上而不是直接定位在我的页脚下方时，它只是定位在页面的最顶部。知道这是为什么吗？如果不是没关系，发布整个网站的代码会很困难。你让我走上了正轨。
那么您需要将position: relative 添加到.site-footer。它写在答案中。
一个问题是，当您更改背景颜色以匹配正文颜色时，边框无法正确显示。它似乎有一条实线穿过而不是虚线。
由于这个新的虚拟元素:after，这不可能发生。我已经更新了 JSFiddle 并将边框设置为 10px。看看jsfiddle.net/catalinmunteanu/1at9fs4m/3
您可以在浏览网页时放大浏览器以获得清晰的视图。使用Ctrl +（放大）、Ctrl -（缩小）、Ctrl 0（重置）

【解决方案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

【讨论】：