上的 css 渐变背景拉伸至 100% 宽度和高度

Question

所以我想要一个填充 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左右。我这样做错了吗？我需要在某处抵消一些填充吗？

Answer 1

删除您的 height: 100% 声明。看起来将高度设置为 100% 只是将其设置为视口的 100%，而不是页面本身的 100%。

Answer 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 类。

Answer 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 */
}