Crossbrowser背景图像重复y渐变

Question

我的图片1*910px很高，我想要制作背景。

这是我的css：

body
{
    background-image:url('/Content/themes/start/images/bgw.png');
    background-position: 50% 100%;
    background-repeat: repeat-x;
    background-color: #e8f3fb;    
    color: #000;
}

如果我的网页内容很长，看起来不错，但如果网页内容不长，则背景无法正确显示。

我确实尝试设置min-height，但这不是我想要实现的目标。

也许有其他方法可以做到这一点，或者如果没有：我该如何解决？

有没有办法根据内容大小使背景更具动态性？

有任何建议/样本吗？

Answer 1

你可以使用CSS渐变，现在它们得到了相当好的支持。

E.g。

旧版浏览器的后备版

background: #333 url(gradient.gif) left top repeat-x;

Firefox，Safari / Chrome和apparently Opera 11.10 and later

（早期的一些歌剧支持SVG in background images, which is another alternative for gradients，但我不确定它与其他方法有多好。再加上你必须学习一些SVG。）

background: -moz-linear-gradient(
    top,
    #333 0%,
    #555 100%
);
background: -o-linear-gradient(
    top,
    #333 0%,
    #555 100%
);
background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    color-stop(0%,#333),
    color-stop(100%,#555)
);

IE

filter: progid:DXImageTransform.Microsoft.gradient(
    startColorstr='#333333',
    endColorstr='#555555',
    GradientType=0
);