CSS3背景图像不垂直拉伸

是指在使用CSS3的背景图像属性时，可以通过设置背景图像的大小和位置来控制图像的显示方式，以避免图像在垂直方向上拉伸变形。

在CSS3中，可以使用background-size属性来控制背景图像的大小。默认情况下，背景图像会根据容器的大小进行拉伸以填充整个背景区域。但是，如果希望背景图像在垂直方向上不进行拉伸，可以使用background-size属性的值为auto来实现。

具体的CSS代码如下所示：

.background {
  background-image: url('背景图像的URL');
  background-size: auto 100%; /* 设置背景图像的宽度自适应，高度100% */
  background-repeat: no-repeat; /* 禁止背景图像重复 */
  background-position: center; /* 设置背景图像居中显示 */
}

上述代码中，background-size属性的值为auto 100%，表示背景图像的宽度自适应容器的宽度，高度保持100%不变。这样就可以确保背景图像在垂直方向上不进行拉伸，而只在水平方向上进行自适应。

这种技术可以应用于各种需要保持背景图像比例的场景，例如网页的头部、侧边栏等区域。通过设置背景图像的大小和位置，可以实现更好的视觉效果。

腾讯云相关产品和产品介绍链接地址：