1. 确定背景图片

2. 将图片放入项目目录

3. 使用CSS设置背景图片

  • background-image: 设置背景图片的URL。
  • background-size: 控制背景图片的大小。
  • background-repeat: 控制背景图片的重复方式。
  • background-position: 控制背景图片的位置。

示例：

<style scoped>
  .background-container {
    background-image: url('~@/assets/background.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    height: 100vh;
  }
</style>

这里，~@/是一个别名，指向src/目录。这样可以在CSS中方便地引用src/目录下的资源。

4. 使用Vue模板

<template>
  <div class="background-container">
    <!-- 页面内容 -->
  </div>
</template>

5. 调整和优化

  • 响应式设计：确保在不同屏幕尺寸下背景图片都能正确显示。可以使用媒体查询来调整背景图片的样式。
  • 性能优化：如果背景图片很大，可以考虑使用图片压缩工具来减小文件大小，或者使用懒加载技术来延迟加载图片。

6. 总结