[分享]css中body设置背景图片自适应

CSS 中通过设置 body 背景图片可以为页面添加视觉效果，而自适应背景图片则可以让页面更具有响应性，随着窗口大小的变化而适应变化。下面我们讲一下如何设置 CSS 中 body 的背景图片自适应。b...

CSS 中通过设置 body 背景图片可以为页面添加视觉效果，而自适应背景图片则可以让页面更具有响应性，随着窗口大小的变化而适应变化。下面我们讲一下如何设置 CSS 中 body 的背景图片自适应。

body {
    background-image: url('bg.png');
    background-size: cover;
    background-repeat: no-repeat;
} 

上面是设置 body 背景图片自适应的代码片段。其中，我们通过添加 background-size 属性并设置 cover 值，让背景图片自动适应整个页面；通过设置 background-repeat 属性并设置 no-repeat 值，让背景图片不重复显示。

除了使用 cover 值，我们还可以使用其他的值，例如 contain，这个值会让背景图片按照原始尺寸显示在页面内，但也会导致留白或者溢出。我们根据具体的需求选择合适的属性值。

需要注意的是，当我们使用自适应背景图片时，图片可能会失真或者拉伸，因此在选择图片时应当注意其分辨率和比例，以保证最终效果良好。

总结一下，通过设置 background-size 和 background-repeat 属性，我们可以为 body 元素添加自适应的背景图片。我们可以根据实际情况选择合适的属性值，从而为页面增加更加美观的效果。