渐变结束后如何显示白色而不是灰色？答案

【问题标题】：How to show white color after gradient ends instead of gray color?渐变结束后如何显示白色而不是灰色？
【发布时间】：2013-04-18 18:00:14
【问题描述】：

我有以下 CSS 用于背景颜色/渐变：

background-color: #FFFFFF;
background: -moz-linear-gradient(top,  #d7d6d2,  #f9ffff);
background-image: linear-gradient(top,  #d7d6d2,  #f9ffff);
background-image: -o-linear-gradient(top,  #d7d6d2,  #f9ffff);
background-image: -moz-linear-gradient(top,  #d7d6d2,  #f9ffff);
background-image: -webkit-linear-gradient(top,  #d7d6d2,  #f9ffff);
background-image: -ms-linear-gradient(top,  #d7d6d2,  #f9ffff);

使用它我可以完成我需要的工作，但是在渐变结束后会出现灰色而不是白色。我该怎么做才能在渐变结束后开始显示白色？

【问题讨论】：

您能否详细说明您要设置样式的 HTML 布局？

标签： css background-image linear-gradients

【解决方案1】：

将容器背景设置为白色。在这种情况下，它使用 html 和正文 DEMO http://jsfiddle.net/kevinPHPkevin/RxXHz/

CSS

html {
    height:100%;
    background-color: #FFFFFF;
}
body {
    padding:0;
    margin:0;
    width:100%;
    height:100%;
    background-color: #FFFFFF;
    background: -moz-linear-gradient(top, #d7d6d2, #f9ffff);
    background-image: linear-gradient(top, #d7d6d2, #f9ffff);
    background-image: -o-linear-gradient(top, #d7d6d2, #f9ffff);
    background-image: -moz-linear-gradient(top, #d7d6d2, #f9ffff);
    background-image: -webkit-linear-gradient(top, #d7d6d2, #f9ffff);
    background-image: -ms-linear-gradient(top, #d7d6d2, #f9ffff);
}

【讨论】：

您的解决方案可能会奏效。但我意识到你的修改会影响我的一些 div。我会看看我是否可以移动 div 以适应它。谢谢！

【解决方案2】：

看你的渐变定义，你为什么不把结束颜色设置为纯白色：

background-image: linear-gradient(top,  #d7d6d2,  #ffffff);

目前，您的结束颜色非常接近白色#f9ffff，以至于大多数人的眼睛都不够敏锐，无法区分。

【讨论】：

谢谢马克。但这样做会弄乱配色方案。

【解决方案3】：

该渐变的白色部分将到达分配给它的任何元素的底部。我的猜测是，您在分配给它的东西之外还有一些不是白色的东西。

【讨论】：

我仔细检查过，但似乎找不到任何冲突的东西。谢谢肖恩！