如何使用 CSS 缩放和拉伸背景

Question

如何在 CSS 中获取背景以拉伸或缩放以填充其容器大小？

我正在做如下

body
{ 
    background: url(http://p1.pichost.me/i/40/1639647.jpg) no-repeat fixed; 
    background-size: 100%;
    margin:0;
}

这段代码有什么问题？

Answer 1

试试这个来重置 CSS：

* {
     margin:0;
     padding:0;
     border:0;
}

body {
       background: url(http://p1.pichost.me/i/40/1639647.jpg) no-repeat fixed;
       background-size: cover;
       -webkit-background-size: cover;
       -moz-background-size: cover;
       -o-background-size: cover;
     }

Answer 2

只是你可以做到这一点...

body {  
background: url(http://p1.pichost.me/i/40/1639647.jpg) no-repeat;
background-size: 100%;

}

Answer 3

看起来您的代码正在运行。 请注意，当您应用fixed背景位置时，您将图像从dom取出，就像它是固定图像一样，因此，如果您这样做：

background: url(http://p1.pichost.me/i/40/1639647.jpg) no-repeat top left;
background-size: cover;

它应该像你希望的那样工作。 我也遇到过这个，可能有帮助： CSS background-size: cover + background-attachment: fixed clipping background images