页脚没有显示的背景颜色

Question

我使用Bootstrap 4重新构建了一个页面，似乎无法弄清楚为什么页脚背景颜色没有显示。 The page is up here

＆＃13;

＆＃13;

.footer {
  width: 100%;
  font-size: 1.5rem;
  text-align: center;
  overflow: visible;
  color: #004289;
  font-weight: bold;
  height: 2rem;
  background-color: #CFFEEE;
}	

＆＃13;

<footer class="footer">
<div class="container">
<div class="text-center">Copyright &copy; <script>document.write(new Date().getFullYear());</script> The Driftwood</div>
</div>
</footer>

＆＃13;

＆＃13;

＆＃13;

我认为我的大脑正在爆炸，应该如此简单。谢谢 编辑：它出现在我想要的运行代码片段管理器中。如果您需要更多代码，请查询或查看实时页面。 这就是我所看到的

在head部分我链接到BS css和我的自定义CSS这样

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<link href="dist/css/custom-bs4.css" rel="stylesheet">

Answer 1

您的.container白色背景覆盖了它，因为它是一个比.footer更具体的选择器。

要覆盖你可以这样做：

.footer .container {
  background-color: #CFFEEE;
}

Answer 2

要删除.container的背景，请执行以下操作：

.container {
    background: none;
}

您也可以将其定义为标准

* {
    background: none;
}

我认为这比给.container相同的背景更好，因为这可以帮助您解决许多其他问题

Answer 3

在网站链接中，您似乎遇到了css问题：

span.navbar-toggler-icon {
        background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0,51,102)' stroke-width='3' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");

.navbar .navbar-toggler:hover span.icon-bar {
  background: #004289;
}

如果您注意到，span.navbar-toggler-icon有一个开放的{但不是结束的%username%。从那里开始 - 整个css文件无效（语法错误，因为你没有关闭该选择器）。

您可以使用以下css验证程序检查您的CSS：
https://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fdriftwoodrentals.com%2Fdist%2Fcss%2Fcustom-bs4.css&profile=css3&usermedium=all&warning=1&vextwarning=&lang=en

Answer 4

我可以看到你的内部容器.container元素的背景#fff。与页脚背景颜色重叠。

awk '{if(match($0,/~[^ ]*/)) sub(/id[0-9]/,substr($0,RSTART+1,RLENGTH-1))}1' file

custom-bs4.css中的第10行

Answer 5

您可能需要重新加载您的css页面......它可能已经为您缓存了;）

Answer 6

谢谢大家！我没想到要添加.footer .container { background-color: #CFFEEE; }

当页面全屏时它起作用，但当它最小化时，如移动一样，页脚区域再次变为带有海军文本的白色。我该如何解决这个问题？

Answer 7

您的页面Your page link在桌面上具有正确的页脚背景，但在移动设备中它是白色的。背后的原因是，你已经定义了

@media (min-width: 767px)
custom-bs4.css:395
.footer .container {
    background-color: #CFFEEE;
}

因此，当谈到移动尺寸时，宽度会从767px降低。所以你的这种情况不满意。相反，它应用以下样式：

.container {
     background-color: #fff; 
}

因此，仅在您的移动背景颜色为白色。

因此，请尝试在移动设备屏幕上再使用一个@media，以获取页脚所需的颜色，或删除页脚@media min-width的规范。 你也可以尝试一下：

.footer .container {
  background-color: #CFFEEE;
}