跨浏览器背景图像重复 y 渐变答案

【问题标题】：Crossbrowser background-image repeat-y gradient跨浏览器背景图像重复 y 渐变
【发布时间】：2011-04-06 19:38:37
【问题描述】：

我有图片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，但这不是我想要实现的。

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

有什么办法可以根据内容大小让背景更加动态？

任何建议/示例？

【问题讨论】：

标签： html css

【解决方案1】：

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

例如

旧版浏览器的回退

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

Firefox、Safari/Chrome 和 apparently Opera 11.10 and later

（一些早期的 Opera 支持 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
);

【讨论】：

@Reg：如果 Opera 用户抱怨缺少渐变背景，请给他们俩买一杯饮料来弥补。
@Paul D. Waite 我更喜欢使用背景：#333 url(gradient.gif) left top repeat-x; gradient.gif 的最佳高度是多少？
@Reg：我猜和你的内容高度一样？
+1 用于有趣的 Opera 评论。可惜它没有更多的市场份额，它是一个很好的浏览器。
@thirtydot：确实，有第三个优秀的渲染引擎是件好事。我很高兴（也有点惊讶）它仍然存在于那些使用它的人身上。不过，我不会因为缺少漂亮的视觉效果而失眠。