background-image背景图片拉伸平铺

要实现背景图片的拉伸或平铺效果，可以使用CSS的background-size和background-repeat属性。

• background-size: 控制背景图片的大小，可以设置为cover（保持原有比例，多余的图片会被裁剪掉），contain（保持原有比例，可能会有空白区域），或者具体的宽高值。
• background-repeat: 控制背景图片是否和如何平铺，可以设置为repeat-x（横向平铺），repeat-y（纵向平铺），或no-repeat（不平铺）。

以下是一个实例代码，展示如何设置背景图片的拉伸和平铺：

/* 拉伸背景图片 */
.stretch-background {
  background-image: url('path/to/your/image.jpg');
  background-size: cover; /* 或者使用 contain */
  background-repeat: no-repeat;
}
 
/* 横向平铺背景图片 */
.repeat-x-background {
  background-image: url('path/to/your/image.jpg');
  background-size: auto; /* 或者具体的宽高值 */
  background-repeat: repeat-x;
}
 
/* 纵向平铺背景图片 */
.repeat-y-background {
  background-image: url('path/to/your/image.jpg');
  background-size: auto; /* 或者具体的宽高值 */
  background-repeat: repeat-y;
}

HTML部分：

<div class="stretch-background">Stretch Background</div>
<div class="repeat-x-background">Repeat X Background</div>
<div class="repeat-y-background">Repeat Y Background</div>

根据需求选择合适的属性值，以达到所需的背景图片显示效果。