如何使用CSS调整背景图片的尺寸？

Question

如何使用CSS调整背景图片的大小？

- Nitin Jindal

Answer 1

您可以使用CSS3的background-size属性。

以下是可在支持该属性的所有浏览器中实现的代码。

.foo {
        background-image: url(bg-image.png);

       -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 */
            background-size: 100% 100%;           /* Gecko 2.0 (Firefox 4.0) and other CSS3-compliant browsers */

       -moz-border-image: url(bg-image.png) 0;    /* Gecko 1.9.1 (Firefox 3.5) */
}

- nunopolonia

---

此属性不支持。 - Nitin Jindal

background-size属性不支持。 - Nitin Jindal

有点不幸（但并不奇怪）的是，支持的浏览器列表中并没有包括IE。 - Spudley

@Spudley IE9支持background-size属性。我认为微软正在努力追赶IE9。 - nunopolonia

@nunopolonia - 的确如此。但是IE9尚未发布，因此不算数。我知道它还在测试版阶段，但在最终版本发布之前，IE8仍然是当前版本（即使在IE9发布后，我们仍需要继续支持IE8...和IE7...对于一些可怜的人来说，甚至仍然需要支持IE6）。 - Spudley

Answer 2

你可以考虑使用jQuery插件Backstretch。它可以帮助你轻松地将图片设置为网页背景。

- Durga Dutt

Answer 3

这就是如何做到的。适用于所有浏览器。

body 
 {

    background-image:url('../back.jpg');
background-repeat:no-repeat ;
 -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 */
        background-size: 100% 100%;           /* CSS3-compliant browsers */

   -moz-border-image: url(../back.jpg) 0;  
 background-size: cover;  /* Gecko 1.9.1 (Firefox 3.5) */
   }

- Raj Nandan Sharma

Answer 4

除了CSS3之外，似乎在以前的级别（即标准）中，唯一的方法是制作正确尺寸的图像，并设置其背景位置和重复属性。

- MattiaG

Answer 5

您可以使用CSS属性background-size；但值得注意的是，旧版本的浏览器可能不支持此功能。

另一种方法是创建一个新的<div>元素，使用position:absolute和较低的z-index，使其位于其他相关元素后面。然后，您可以使用此div作为背景图像，并独立于其前面的主要元素调整其大小到所需尺寸。

- Spudley

---

@HonestAbe - 如果其他人的答案已经过时，你可以（甚至是被鼓励）进行编辑。我不会一直回去检查我的所有答案是否有变化，但如果你发现有问题，请随意进行编辑。 - Spudley