Question

我使用过此代码，但只有宽度才会拉伸。我想让整个图像延伸到全屏。

body
{
    margin: 0px;
    padding: 0px;
    color: white;
    font-family: Verdana;
    background-size: 100% auto;
    background-image: url(http://p1.pichost.me/i/40/1639647.jpg);
}

Answer 1

background-size: cover;怎么办？

body{
 color: white;
 font-family: Verdana;
 background-size: cover;
 background-image: url(http://p1.pichost.me/i/40/1639647.jpg) no-repeat fixed;
}

Answer 2

这是我喜欢使用的方法：

JS Fiddle

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

Answer 3

您可以使用html代替高度：100％并覆盖背景大小的值，如果您不介意看到图像被拉伸，则仅覆盖100％： jsfiddle

html
{
    height : 100% ;
    margin: 0px;
    padding: 0px;
    color: white;
    font-family: Verdana;
    background-size: cover;
    background-image: url(http://p1.pichost.me/i/40/1639647.jpg);
}

jsfiddle

html
{
    height : 100% ;
    margin: 0px;
    padding: 0px;
    color: white;
    font-family: Verdana;
    background-size: 100% 100%;
    background-image: url(http://p1.pichost.me/i/40/1639647.jpg);
}

你可能想在HTML上使用min-height：jsfiddle

html
{
    min-height : 100% ;
    margin: 0px;
    padding: 0px;
    color: white;
    font-family: Verdana;
    background-size: 100% 100%;
    background-image: url(http://p1.pichost.me/i/40/1639647.jpg);
}

背景没有拉伸到屏幕尺寸

3 个答案: