[分享]css中body背景自适应

在CSS中，我们可以通过设置body元素的背景属性，来给整个网页添加背景色或图片。但是，在不同屏幕尺寸和设备上，使用固定的背景属性值可能会导致网页显示效果不佳，因此我们需要为body元素添加自适应背景...

在CSS中，我们可以通过设置body元素的背景属性，来给整个网页添加背景色或图片。但是，在不同屏幕尺寸和设备上，使用固定的背景属性值可能会导致网页显示效果不佳，因此我们需要为body元素添加自适应背景。

要实现body背景自适应，我们可以使用CSS中的background-size属性。这个属性可以指定背景图的尺寸，同时也可以设置自适应属性，以便让背景图能够适应不同的屏幕尺寸。

body {
    background-image: url("bg.jpg");
    background-size: cover;
} 

在这个例子中，我们将body的背景设置为一张名为“bg.jpg”的图片，并且使用cover值来指定背景图在宽高比上缩放以适应整个屏幕。这样，无论屏幕尺寸如何变化，背景图都会填充整个屏幕。

除了cover，我们还可以设置background-size为contain，这样背景图就会按原始宽高比缩放，以便完整地显示出来。这种方式适用于在背景图中包含重要内容的情况。

body {
    background-image: url("bg.jpg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
} 

在这个例子中，我们通过设置background-repeat为no-repeat，以防止背景图被重复显示。同时，我们使用background-position指定了背景图的位置居中显示。

总之，通过设置background-size属性，我们可以轻松地实现body元素的背景自适应。这样，网页的背景图就可以随着屏幕尺寸变化而自适应，为用户带来更好的浏览体验。