<body> 上的 CSS 渐变背景，宽度和高度为 100%答案

【问题标题】：css gradient background on <body> that stretches to 100% width and height<body> 上的 CSS 渐变背景，宽度和高度为 100%
【发布时间】：2011-05-16 23:17:48
【问题描述】：

所以我想要一个渐变来填充 100% 的网页背景。对于不能处理的浏览器，纯色就可以了。

这是我当前的 css：

html {
height: 100%;
}
body {
height: 100%;
margin: 0;
padding: 0;
background-repeat: no-repeat;
background: #afb1b4; /* Old browsers */
background: -moz-linear-gradient(top, #afb1b4 0%, #696a6d 100%) no-repeat; /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#afb1b4), color-stop(100%,#696a6d)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #afb1b4 0%,#696a6d 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #afb1b4 0%,#696a6d 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #afb1b4 0%,#696a6d 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#AFB1B4', endColorstr='#696A6D',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #afb1b4 0%,#696a6d 100%); /* W3C */
}

虽然页面内容很少，但似乎可以解决问题，但是当我用更多内容、导航等填充页面时，底部现在有一些白色。也许100px左右。我做错了吗？我需要在某处抵消一些填充吗？

【问题讨论】：

看起来你从这里得到了这个：colorzilla.com/gradient-editor
@Jason，我做到了，它非常彻底地跨浏览器，我喜欢。但是，我还没有测试非 FF 浏览器。这一点很快就会到来。
我经常使用它。它是跨浏览器的，而且效果很好。
如果您不关心向后兼容性（回退到纯色），为什么不摆脱 6 行代码并通过 background-image: url() 使用 SVG 渐变？它适用于 IE9+、FF4、Webkit 和 Opera 10。
因为额外的几行代码让我获得了很多旧浏览器。我不会担心古老的浏览器，但如果我可以让它在大多数浏览器中运行，那绝对是我的偏好。

标签： css gradient

【解决方案1】：

摆脱您的height: 100% 声明。似乎将高度设置为 100% 只是将其设置为视口的 100%，而不是页面本身的 100%。

【讨论】：

谢谢，成功了！下面的代码，即使将 height: 100% 扔在那里，也能正常工作。不过，移除高度似乎是正确的做法。
@Jason：小提琴怎么了？

【解决方案2】：

这是我的评论的扩展，使用 SVG 而不是供应商前缀和专有扩展。这减少了 CSS 的大小，并且通过采用一些巧妙的策略，可以让您使用单个 SVG 文件作为渐变的精灵包（减少 HTTP 请求的总数）。

首先创建您的 SVG 文件和渐变（根据您的问题规范）：

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="1" height="500" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <g>
        <defs>
            <linearGradient id="ui-bg-grad" x1="0%" x2="0%" y1="0%" y2="100%">
                <stop offset="0%" stop-color="#afb1b4" />
                <stop offset="100%" stop-color="#696a6d" />
            </linearGradient>
        </defs>
        <rect fill="url(#ui-bg-grad)" x="0" y="0" width="100%" height="500"/>
    </g>
</svg>

接下来，这是你的新声明：

html {
    height: 100%;
}
body {
    height: 100%;
    margin: 0;
    padding: 0;
    background-repeat: no-repeat;
    background-color: #afb1b4; /* Old browsers: anything not listed below */
    background-image: url("grad.svg"); /** Browsers that support SVG: IE9+, FF4+, Safari 4+(maybe 5), Opera 10+
}

现在，如果您想通过 png 图像支持旧版浏览器，只需稍作改动即可。由于任何使用url() 的属性都不支持提示（如@font-face 的src 属性），因此您必须稍微更改规则。

html {
    height: 100%;
}
body {
    height: 100%;
    margin: 0;
    padding: 0;
    background-repeat: no-repeat;
    background-color: #afb1b4; /* Image fails to load, or FF3.5 */
    background-image: url("grad.png"); /* Old browsers: anything not listed below or above */
}

body:not(foo) { /* most browsers that support :not() support SVG in url(), except FF3.5 */
    background-image: url("grad.svg"); /* Browsers that support SVG: IE9+, FF4+, Safari 4+(maybe 5), Opera 10+ */
}

如果您想变得愚蠢，可以对 SVG 文件进行 base64 编码，这样您就不必从服务器下载另一个文件，然后将其添加为要重用的类（防止在多个位置重新粘贴 base64）。

.svg-sprite:not(foo)
{
    background-size: 100% 100%;
    background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSI1MDAiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48Zz48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9InVpLWJnLWdyYWQiIHgxPSIwJSIgeDI9IjAlIiB5MT0iMCUiIHkyPSIxMDAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjYWZiMWI0IiAvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzY5NmE2ZCIgLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCBmaWxsPSJ1cmwoI3VpLWJnLWdyYWQpIiB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSI1MDAiLz48L2c+PC9zdmc+");
}

html {
    height: 100%;
}

body {
    height: 100%;
    margin: 0;
    padding: 0;
    background-repeat: no-repeat;
    background-color: #afb1b4; /* Image fails to load, or FF3.5 */
    background-image: url("grad.png"); /* Old browsers: anything not listed below or above */
}

然后更新您的 body 标记以包含 .svg-sprite 类。

【讨论】：

如果我有 15 个声望，我会投票赞成。很棒的，彻底的答案。非常感谢！
@不幸的是，np。我只是有一个问题，即完美可移植且稳定的规范没有看到像 css 渐变那样大的影响（这在开发中仍然非常重要）。

【解决方案3】：

我还发现在末尾添加“固定”似乎可以解决问题：

body {
margin: 0;
padding: 0;
background-repeat: no-repeat;
background: #afb1b4; /* Old browsers */
background: -moz-linear-gradient(top, #afb1b4 0%, #696a6d 100%) fixed no-repeat; /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#afb1b4), color-stop(100%,#696a6d)) fixed; /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #afb1b4 0%,#696a6d 100%) fixed; /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #afb1b4 0%,#696a6d 100%) fixed; /* Opera11.10+ */
background: -ms-linear-gradient(top, #afb1b4 0%,#696a6d 100%) fixed; /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#AFB1B4', endColorstr='#696A6D',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #afb1b4 0%,#696a6d 100%) fixed; /* W3C */
}

【讨论】：

请注意，即使是较新的浏览器，这也会大大降低性能！
很高兴知道！图片真的是更好的方法吗？
取决于你所说的更好......因为我认为性能问题（它肯定是一个错误）很重要，我会这么说，是的！如果不是这样，css3 方法肯定会更好。