设置vue3单页面整体背景

<template>
  <div>
    <div class="background-page">

    </div>


    <div>
      <div class="container">
        // 页面主体内容
      </div>
    </div>

  </div>

</template>

<style scoped>
.background-page {
  /* 背景图片地址 */
  background-image: url('public/bg2.jpg');
  /* 覆盖整个元素 */
  background-size: cover;
  /* 背景图片固定，不随页面滚动 */
  background-attachment: fixed;
  /* 背景图片居中 */
  background-position: center;
  /* 背景图片不平铺 */
  background-repeat: no-repeat;
  /* 高度设置，确保可以覆盖整个可视区域 */
  min-height: 100vh;
  /* 其他样式 */
  width: 100%;
  z-index: -1;
  position: fixed;
  filter: opacity(0.1); /* 10% 透明度 */
}

</style>