CSS 背景重复

Question

有什么方法可以使背景图像拉伸(stretch)而不是重复？

Answer 1

不使用任何类型的跨浏览器兼容的 CSS(但是有 background-size 属性。)

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

以下是您在最近的浏览器中的做法:

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