CSS背景重复 [英] CSS Background Repeat

问题描述

有没有什么办法，使背景图像拉伸，而不是重复？

Is there any way to make a background image stretch rather than repeat?

推荐答案

不使用任何类型的跨浏览器兼容的CSS（也就是背景大小然而属性。 ）

Not using any kind of cross-browser compatible CSS (there is the background-size property however.)

如果这是针对在特定的任何浏览器，它可能是可能的。否则，你需要使用＆LT; IMG方式＆gt; 和伸展的

If this is directed at any browser in particular, it might be possible. Otherwise, you'll need to use an <img> and stretch that.

下面是你如何在最新的浏览器做到这一点：

Here's how you do it in recent browsers:

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

另外，使用＆LT; IMG＆GT; ：

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

这篇关于CSS背景重复的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！