css背景图沾满

在Web开发中，网页背景图常常是实现了网页美观性和个性化的重要元素。CSS提供了多种方式来设置网页的背景图，其中最常用的是通过background属性来设置，但是有时候我们会遇到背景图沾满的问题，下面我们来详细介绍一下。

body {
  background: url("background.jpg") no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
 

首先，我们都知道设置背景图时，我们可以指定图像的位置，大小，重复方式等。但是，假设你的背景图尺寸小于网页窗口尺寸，那么背景图就会在窗口中间或另一个指定位置重复显示，这样不仅不美观而且还会影响用户体验，这时候我们就要使用CSS3中的"cover"属性来解决这个问题。

在上述CSS代码中，我们将背景图位置设置在中心，使用no-repeat属性表示不重复显示，fixed属性表示固定背景图的位置。然后使用background-size属性来设置背景图的尺寸，最后使用"cover"属性来拉伸背景图，使其刚好铺满整个窗口。

当然，如果背景图尺寸大于网页窗口尺寸，我们也可以使用"contain"属性来显示整个背景图，不会有任何问题。

body {
  background: url("background.jpg") no-repeat center center fixed;
  -webkit-background-size: contain;
  -moz-background-size: contain;
  -o-background-size: contain;
  background-size: contain;
}
 

总之，CSS提供了多种方式来解决CSS背景图沾满问题。使用"cover"属性可以将背景图拉伸铺满整个窗口，使用"contain"属性可以显示整个背景图。根据实际需求选择合适的属性，使得网站美观而且易于用户操作。