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的大小，并且通过使用一些ingenius策略，可以允许您使用单个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的{{1}}属性），因此您必须稍微更改规则。

src

如果你想变得愚蠢，你可以对SVG文件进行base64编码，这样你就不必从服务器下载另一个文件，然后将其作为一个类重新添加（防止在多个地方重新创建base64）。

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

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

css渐变背景，伸展到100％的宽度和高度

3 个答案: