[分享]css3怎么将背景填满

CSS3有一些属性可以让你将背景填满，这样就可以让页面看起来更加美观，让内容更加突出。

/* 通过background-size属性实现 */
body {
  background-image: url('bg-image.jpg');
  background-size: cover;
} 

上面的代码中，我们设置了body元素的背景图和背景图大小。其中，cover表示完全覆盖元素，保持宽高比例的情况下自适应元素。

/* 通过background-position和background-repeat属性实现 */
body {
  background-image: url('bg-image.jpg');
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
} 

上面的代码中，我们同样设置了body元素的背景图，但是通过设置background-position属性让背景图始终处于元素中心，通过background-repeat: no-repeat属性让背景图不重复，通过background-attachment属性让背景图固定不动。

/* 充满整个屏幕 */
html, body {
  height: 100%;
}
body {
  background-image: url('bg-image.jpg');
  background-size: 100% 100%;
  background-position: center center;
  background-attachment: fixed;
} 

最后，如果想让背景图充满整个屏幕，可以设置html和body元素的高度为100%，然后使用background-size: 100% 100%让背景图填充整个元素。