css 背景图片的自适应

CSS 背景图片是网页设计中非常重要的一部分，它可以为网页增色，提高用户体验。然而，在网页设计中，如何让背景图片自适应可以称为是一个挑战。以下是如何使用CSS让背景图片自适应的方法。

/* HTML 部分 */
<div class="bg-img"></div>

/* CSS 部分 */
.bg-img {
  background: url("背景图片链接") no-repeat center center fixed; 
  /* 设置图片大小 */
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  /* 其他样式设置 */
  height: 100vh;
}

上述 CSS 代码为让背景图片自适应提供了一个简单的示范。首先，我们使用了 background 属性来引入图片，并把它固定在指定位置，避免图片在浏览器窗口滚动时跟着移动。接着，我们使用了 -webkit-background-size、-moz-background-size 和 -o-background-size 属性来设置不同的浏览器中背景图片的大小。最后，我们使用了 background-size 属性并设置为 cover，让背景图片在浏览器窗口中尽可能展示出来。

值得一提的是，我们设置了背景图片所在 div 的高度为 100vh，以确保背景图片能够和网页的其它元素配合良好，并且在不同的设备上也可以很好地适应。

总结来说，在设计网页时，让背景图片自适应是很重要的一环。使用上述 CSS 代码，可以让背景图片始终展示最佳效果，并且在不同的设备上都可以良好地适应。