css背景不随高度变化

CSS的背景图往往会随着页面的高度变化而变化，这对于设计和布局是不利的。不过，我们可以通过一些技巧来让CSS的背景不随高度变化，保持固定。在下面的代码块中，我们将介绍通过哪些方法实现此目的：

<code> .container {
  
   
   
   
 position: relative;
  
   
   
   
 height: 100vh;
  
   
   
   
 background: url(background-image.jpg) no-repeat center center fixed;
  
   
   
   
 background-size: cover;
  
   
}
  
   
   .content {
  
   
   
   
 position: absolute;
  
   
   
   
 top: 50%;
  
   
   
   
 left: 50%;
  
   
   
   
 transform: translate(-50%, -50%);
  
   
   
   
 background: #fff;
  
   
   
   
 padding: 20px;
  
   
}
 

首先，我们需要为容器（container）设置固定的高度。在这个例子中，我们使用100vh，也就是100%视口高度，可以根据需要进行调整。然后，我们需要将背景图像（background-image.jpg）设置为不平铺，在容器的中央固定背景位置，且大小适应容器大小，这样就可以避免背景图像随容器高度变化而变化。

接下来，我们需要将内容（content）定位为相对容器（container）位置固定的绝对位置。然后，我们可以使用CSS的transform属性来将内容框（content）移动到中心位置。将背景设置为白色，可以确保即使背景图像未能充满整个容器，也不会出现不美观的现象。

综上所述，通过以上两行CSS代码，我们就可以轻易地实现CSS背景不随高度变化并保持固定的目的。