css背景按照宽度缩放

CSS Background宽度缩放是指背景图片随着容器宽度的改变而按比例缩放。这种背景缩放技术越来越受欢迎，适用于响应式设计。

我们可以通过以下CSS属性来实现背景宽度缩放：

background-size: contain;
background-size: cover;
background-size: 100% 100%;
 

其中，background-size: contain将背景图片缩放到完全适应容器，但保持其纵横比。如果容器太大，则会出现空白区域。

而background-size: cover会将图片拉伸到完全覆盖容器，但可能会裁剪掉一些部分。

最后，使用background-size: 100% 100%可以将图片缩放到完全覆盖容器，同时保持其纵横比，但不会裁剪任何部分。

现在，让我们看看具体如何在CSS中使用这些属性：

.container {
  background-image: url('background.jpg');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
 

在这个例子中，我们将背景图片设置为background.jpg，并让其不重复出现。接着，我们通过background-position: center center让图片始终处于容器中心。最后，我们使用background-size: cover将其拉伸至完全覆盖容器。

总的来说，背景宽度缩放是一个非常有用的技术，可以帮助我们实现响应式设计并提高用户体验。使用contain、cover或100% 100%来调整背景图片的大小以适应容器，也是一种非常方便的方法。