底部出现灰色部分答案

【问题标题】：Gray section appearing at bottom底部出现灰色部分
【发布时间】：2013-12-15 18:12:52
【问题描述】：

我正在创建一个社交网络，我正在使用linear-gradient(#dadae3, white)。这可行，但是底部的颜色为#dadae3 的部分显示在底部。我没有此部分的元素。

截图：

我正在寻找摆脱这个灰色部分的解决方案。谢谢！

【问题讨论】：

这很可能是因为渐变没有覆盖整个元素，而您的页面背景是#dadae3。在 CSS 中查找元素 body 或 html 的样式。
小提琴或codepen会很棒。
或至少你的一些代码！

标签： html css linear-gradients

【解决方案1】：

由于body 元素缺少~~height~~，您的背景渐变只是在那里重复（我假设您在body 元素上使用渐变），还要确保您已设置你的background-repeat 到no-repeat

Demo

html, body {
   height: 100%; /* Setting both the elements height to 100% */
}

body {
    background-repeat: no-repeat; 
    /* mmmm not required as we have set to fixed but than too no harm using it */
    background-attachment: fixed; /* Fixes background for you */
    background: linear-gradient(#dadae3, white);
}

【讨论】：

【解决方案2】：

它可能是页面的body 或html 元素的background-color！

渐变只是覆盖了您页面中的div！检查 css 中的 body 或 html（或此元素的父级）。

您可能还想检查footer CSS 属性！

试试这个检查：

html, body, footer {
  background-color: transparent; // remove the background..
}

【讨论】：