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

Question

Alright, so I have some issues with an HTML page that I'm coding. 好的，所以我正在编码的HTML页面存在一些问题。 The page (so far) only has a table on it that's 700px wide and 50px tall. 该页面（到目前为止）上只有700px宽和50px高的表格。 I want to use a gradient for the background that rises from the bottom of the page to the center of the page (50%). 我想使用从页面底部到页面中心（50％）上升的背景渐变。

On my stylesheet, I have the following set under the body tag: 在样式表上，在body标记下有以下设置：

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

Unfortunately, background-size counts for how much space is taken up by HTML elements, so the size would be 50% of the height from the top of the page to the bottom of my 50px tall table. 不幸的是，背景大小是指HTML元素占用了多少空间，因此大小将是从页面顶部到50px高表底部的高度的50％。 So, the background ends up being about 30px tall. 因此，背景最终约高30像素。

Also, the background does not position itself at the bottom of window. 另外，背景不会将自身定位在窗口底部。 Instead, it positions itself at the end of the page content (at the bottom of my table). 而是将其自身定位在页面内容的末尾（在表格的底部）。

I've been rattling my brain around this for the past few hours. 在过去的几个小时中，我一直为此感到不安。 I'm redesigning a website I did a few years ago in hopes of bringing it back (the old design was decent, but the code was pretty messy). 我正在重新设计我几年前做过的网站，希望将其重新带回（旧的设计很不错，但是代码很杂乱）。

All help would be appreciated. 所有帮助将不胜感激。 Thanks! 谢谢！

I'm using Chrome v31.0.1650.57 m. 我正在使用Chrome v31.0.1650.57 m。

Answer 1

Have you considered using a gradient generator as opposed to an image? 您是否考虑过使用梯度生成器而不是图像？ It might make your life a little bit easier :) You wont have to worry about repeat/background size, etc 它可能会使您的生活更轻松：)您不必担心重复/背景大小等

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

Answer 2

Your body inherits the size of its only parent element, html , so you have to set the size of both in order to get what you're looking for: 您的body继承了其唯一父元素html的大小，因此必须设置两个元素的大小才能获得所需的内容：

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

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

Then, as Digiguin said, just use a CSS3 gradient background to get what you want, perhaps like this: 然后，正如Digiguin所说，只需使用CSS3渐变背景即可获得所需的内容，也许像这样：

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

Alternatively, you could set the above styles on html instead of body . 另外，您可以在html而不是body上设置上述样式。

What it looks like: 看起来像什么：

在此处输入图片说明

Answer 3

Change it to the <html> background and add height: 100% : 将其更改为<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 个解决方案

解决方案1
2 2013-11-16 22:32:46

解决方案2
1 2013-11-16 22:41:19

解决方案3
0 已采纳 2013-11-16 22:42:30

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

问题描述

3 个解决方案

解决方案1 2 2013-11-16 22:32:46

解决方案2 1 2013-11-16 22:41:19

解决方案3 0 已采纳 2013-11-16 22:42:30

解决方案1
2 2013-11-16 22:32:46

解决方案2
1 2013-11-16 22:41:19

解决方案3
0 已采纳 2013-11-16 22:42:30