Question

好吧，我在编写HTML页面时遇到了一些问题。页面（到目前为止）只有一张表格，宽700像素，高50像素。我想对从页面底部到页面中心的背景使用渐变（50％）。

在我的样式表上，我在body标签下面设置了以下内容：

body {
    background-image: url('./bg.png');
    background-position: bottom;
    background-repeat: repeat-x;
    background-color: white;
    background-size: auto 50%;
}

不幸的是，背景大小会计算HTML元素占用的空间大小，因此大小将是从页面顶部到50px高桌底部的高度的50％。因此，背景最终大约是30px。

此外，背景不会将自己定位在窗口的底部。相反，它将自己定位在页面内容的末尾（在我的表格的底部）。

在过去的几个小时里，我一直在围着这个问题喋喋不休。我正在重新设计一个我几年前做过的网站，希望能把它带回来（旧的设计很不错，但代码很乱）。

所有帮助将不胜感激。谢谢！

我正在使用Chrome v31.0.1650.57 m。

Answer 1

您是否考虑使用渐变生成器而不是图像？它可能会让你的生活更轻松:)你不必担心重复/背景大小等

http://www.colorzilla.com/gradient-editor/

Answer 2

您的body会继承其唯一的父元素html的大小，因此您必须设置两者的大小才能获得您想要的内容：

html {
    width: 100%;  # of the browser window
    height: 100%; # of the browser window
}

body {
    width: 100%;  # of html
    height: 100%; # of html
}

然后，正如Digiguin所说，只需使用CSS3 gradient background来获得你想要的东西，也许就是这样：

body {
    width: 100%;
    height: 100%;
    background: #ffffff; /* Old browsers */
    background: -moz-linear-gradient(top,  #ffffff 0%, #ffffff 50%, #2989d8 50%, #1e5799 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(50%,#ffffff), color-stop(50%,#2989d8), color-stop(100%,#1e5799)); /*   Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #ffffff 0%,#ffffff 50%,#2989d8 50%,#1e5799 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #ffffff 0%,#ffffff 50%,#2989d8 50%,#1e5799 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #ffffff 0%,#ffffff 50%,#2989d8 50%,#1e5799 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #ffffff 0%,#ffffff 50%,#2989d8 50%,#1e5799 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#1e5799',GradientType=0 ); /* IE6-9 */
}

或者，您可以在html上设置上述样式，而不是body。

它看起来像什么：

enter image description here

Answer 3

将其更改为<html>背景并添加height: 100%：

html {
    background-image: url('./bg.png');
    background-position: bottom;
    background-repeat: repeat-x;
    background-color: blue;
    background-size: auto 50%;
    height: 100%;
}

CSS背景大小和背景位置问题

3 个答案: