CSS 背景重复答案

【问题标题】：CSS Background RepeatCSS 背景重复
【发布时间】：2009-08-14 11:17:28
【问题描述】：

有没有办法让背景图片拉伸而不是重复？

【问题讨论】：

【解决方案1】：

不使用任何类型的跨浏览器兼容 CSS（不过有 background-size 属性。）

如果这特别针对任何浏览器，它可能是可能的。否则，您需要使用 <img> 并对其进行拉伸。

这是您在最近的浏览器中的操作方式：

body {
    background-image: url(bg.jpg);
    -moz-background-size: 100% 100%;     /* Gecko 1.9.2 (Firefox 3.6) */
    -o-background-size: 100% 100%;       /* Opera 9.5 */
    -webkit-background-size: 100% 100%;  /* Safari 3.0 */
    -khtml-background-size: 100% 100%;   /* Konqueror 3.5.4 */
}

否则，使用<img>：

img#background {
    /* height: 100%; Note: to keep ratio, don't use height */
    left: 0;
    position: fixed; /* or absolute, if you like */
    top: 0;
    z-index: -1;
    width: 100%;
}

【讨论】：

【解决方案2】：

Only in CSS3

您可以使用图像并将其宽度和高度设置为 100%，将 z-index 设置为 -1 位置为绝对值。这可能行得通。

【讨论】：

【解决方案3】：

background-size 是 CSS3，尚不支持。你可以看看这篇文章：How Do you Stretch a Background Image in a Web Page

希望这会有所帮助。

【讨论】：

【解决方案4】：

body
{ 
background-image:url('smiley.gif');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center; 
}

http://www.w3schools.com/css/css_background.asp

这不会拉伸您的图像，但会使图像不再重复。

【讨论】：