Question

是否可以将背景图片的大小增加到超出其尺寸以填充页面。我知道会有一些模糊但是没关系。

例如，如果我的图像宽度为1000像素，我怎样才能使其超出宽度以填充屏幕。

Answer 1

尝试

background-size: 100%

或

background-size: cover

这是一个常见的实现。

＆＃13;

html, body {
  height: 100%;
  margin: 0px;
  padding: 0px;
}

body {
  background-image: url('http://placehold.it/150x150');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

＆＃13;

Answer 2

将图片设置为背景，并使用background-size，background-position和background-repeat属性：

background-size: 100%;
background-position: center;
background-repeat: no-repeat;

Answer 3

background-size: 100%;
background-position: center;
background-repeat: no-repeat;

Answer 4

使用background-size: cover;

#content { 
  
  width: 600px;
  height: 300px;
  border: 2px solid #333;
  background: #ddd url(http://lorempixel.com/400/200/nightlife/) no-repeat center center; 

  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  
}

<div id="content">
</div>

即使图像尺寸小于页面，也可以将背景图像拉伸到窗口的全宽度？

4 个答案: