【问题标题】：How to change color of footer?如何更改页脚的颜色？
【发布时间】：2016-07-15 01:35:57
【问题描述】：

我是 HTML 和 CSS 新手，不知道如何更改 http://materializecss.com/footer.html 处的页脚颜色。任何帮助都会很棒，谢谢！

【问题讨论】：

【解决方案1】：

如果您想使用Materialize colors 之一，您只需将red / orange / teal 添加到您的footer 类中，如下所示：

<footer class="page-footer pink lighten-1">

【讨论】：

这是一个更好的选择。

【解决方案2】：

包含页脚着色信息的类是page-footer，所以你可以改变颜色，如下图：

<style>
    .page-footer {
        background-color: blue;
    }
</style>

另外您可以在页脚设置ID 并覆盖现有设置，如图所示：

HTML：

<footer id = "myFooter">...</footer>

CSS（内联）：

<style>
    #myFooter {
        background-color: blue;
    }
</style>

如果上述方法不起作用，请尝试使用 !important 强制更改，如下所示：

<style>
    #myFooter {
        background-color: blue !important;
    }
</style>

查看 this fiddle 和下面的 sn-p 以查看现场演示：

#myFooter {
  background-color: blue;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css" rel="stylesheet" type="text/css" />
<footer id="myFooter" class="page-footer">
  <div class="container">
    <div class="row">
      <div class="col l6 s12">
        <h5 class="white-text">Footer Content</h5>
        <p class="grey-text text-lighten-4">You can use rows and columns here to organize your footer content.</p>
      </div>
      <div class="col l4 offset-l2 s12">
        <h5 class="white-text">Links</h5>
        <ul>
          <li><a class="grey-text text-lighten-3" href="#!">Link 1</a>
          </li>
          <li><a class="grey-text text-lighten-3" href="#!">Link 2</a>
          </li>
          <li><a class="grey-text text-lighten-3" href="#!">Link 3</a>
          </li>
          <li><a class="grey-text text-lighten-3" href="#!">Link 4</a>
          </li>
        </ul>
      </div>
    </div>
  </div>
  <div class="footer-copyright">
    <div class="container">
      © 2014 Copyright Text
      <a class="grey-text text-lighten-4 right" href="#!">More Links</a>
    </div>
  </div>
</footer>

【讨论】：

【解决方案3】：

手动颜色

如前所述，您可以按类创建一些 CSS：

.page-footer{
    background-color: your color here;
}

或者为页脚指定一个ID，然后像这样设置background-color。

使用类的材质颜色

如果您想使用材质颜色（参见列表here），您可以使用类，或复制粘贴十六进制值。如果您使用十六进制值，请参阅“手动颜色”下的第一个 sn-p 以进行实施。

如果您使用颜色类，它就像任何其他元素一样：

<footer class = "page-footer your-color-class">

举个例子：

<footer class="page-footer amber darken-2">

（虽然darken-2不是必须的，这只是一个例子。在这种情况下，我使用amber darken-2作为颜色）

使用材质类的 SASS/SCSS

注意： SASS/SCSS 需要 ruby 编译器，并编译为常规 CSS。如果您不使用.scss 或.sass，这将不起作用。

如果您使用的是 SASS，还有另一种方式（这是 SCSS，同样适用于 SASS，只是语法略有不同）：

.page-footer{
    @extend .your-color-class;
}

使用与之前相同的颜色，这将是：

.page-footer{
    @extend .amber, .darken-2;
}

这使用了SASS/SCSS 的继承特性。请注意，这只有在您下载并@imported 的 SCSS 版本的 materialize（it does officially have and support）时才有可能。

【讨论】：

【解决方案4】：

只需将您需要的颜色的颜色代码添加到页脚类例子

<footer class="page-footer blue-grey darken-4">
      <div class="container">
        <div class="row">
          <div class="col l6 s12">
            <h5 class="white-text">Contacts Us</h5>
            <p class="grey-text text-lighten-4">You can use rows and columns here to organize your footer content.</p>
          </div>
          <div class="col l4 offset-l2 s12">
            <h5 class="white-text">Links</h5>
            <ul>
              <li><a class="grey-text text-lighten-3" href="#!">Link 1</a></li>
              <li><a class="grey-text text-lighten-3" href="#!">Link 2</a></li>
              <li><a class="grey-text text-lighten-3" href="#!">Link 3</a></li>
              <li><a class="grey-text text-lighten-3" href="#!">Link 4</a></li>
            </ul>
          </div>
        </div>
      </div>
      <div class="footer-copyright">
        <div class="container">
        © 2014 Copyright Gautham J
        <a class="grey-text text-lighten-4 right" href="#!">More Links</a>
        </div>
      </div>
    </footer>

此处提供颜色代码Color codes

【讨论】：

接受的答案是css 101，已经尝试了30分钟，还是不行。这是正确的！我猜他们使用 JS，它覆盖了简单的 CSS 规则优先级。

【解决方案5】：

CSS：

footer {
  background-color: red; 
}

【讨论】：

【解决方案6】：

我查看了 css 并找到了为页脚着色的类。

footer.page-footer {
    background-color: #333333;
}

【讨论】：

【解决方案7】：

在您自己的 CSS 文档中，您需要将其放在您需要添加的 materialise.css 文档之后：背景颜色：#fff；到页脚类。（#fff 可以更改为不同的颜色，请访问 htmlcolorcodes.com 了解更多信息）我希望他们这会有所帮助...

【讨论】：

【解决方案8】：

只需选择您的页脚元素标签并在其上放置一些 CSS 背景。例如。

footer{background:red;}

【讨论】：

【解决方案9】：

我试过了，效果很好

footer.page-footer {
        background-color:hotpink;
    }

【讨论】：

【解决方案10】：

只需添加类，例如，更改下面的导航颜色：

 <nav class="teal lighten-2">

【讨论】：

【解决方案11】：

您需要使用物化框架。如果您认为级联优先级会起作用……请三思。这是 Materialise 需要重新思考的问题。他们不应该覆盖级联样式规则，但我猜他们应该使用 JS。需要将类添加到要应用颜色的元素。

<span class="blue-text text-darken-2">This is a card panel with dark blue text</span>

在你试图用头撞墙之前，灰色就是灰色。

【讨论】：