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

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%;
}

不幸的是，background-size 会计算 HTML 元素占用的空间大小，因此该大小是从页面顶部到我的 50px 高表格底部高度的 50%。因此，背景最终高约 30 像素。

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

在过去的几个小时里，我一直在为这个问题绞尽脑汁。我正在重新设计我几年前做过的一个网站，希望能把它带回来(旧的设计不错，但代码很乱)。

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

我使用的是 Chrome v31.0.1650.57 m。

Answer 1

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

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