vue页面，背景图片拉伸

在Vue.js中，如果你想让背景图片在页面上拉伸至全屏或自适应布局，你可以通过CSS样式来实现。你可以使用`background-image`属性设置背景图片，然后结合`background-size`属性来指定拉伸方式。以下是常见的几种方法：

1. **填充满整个容器**:

   <div class="stretch-background">
     <!-- 其他内容 -->
   </div>
   
   .stretch-background {
     background-image: url('your-image-url.jpg');
     background-size: cover; /* 图片会填充其容器并保持纵横比缩放 */
   }

2. **完全平铺** (适合背景图片大小固定的情况):

   <div class="full-screen-background">
     <!-- 其他内容 -->
   </div>

   .full-screen-background {
     background-image: url('your-image-url.jpg');
     background-size: 100% 100%; /* 图片将按照100%宽度和高度拉伸 */
   }

3. **等比例拉伸**:
如果想保持图片原始比例，并按宽度或高度的百分比拉伸，可以只设置一个方向的尺寸：

   .cover-width {
     background-image: url('your-image-url.jpg');
     background-size: cover;
   }

   .contain-height {
     background-image: url('your-image-url.jpg');
     background-size: contain;
   }

这里`.cover-width`会使背景图在宽度上覆盖容器，而在高度上保持原比例；`.contain-height`则相反。