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

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

3 个答案: