css+vue2实现单页面添加背景图片

具体效果

在div中定义样式名称

在末尾的<style>中设置样式

<style>
/**

url图片路径
no-repeat保证图片不会重复
center center fixed 图像会固定在元素的中心，即使页面滚动也不会移动。
background-size 设置背景图像的大小
width/height 该元素将占据父元素的全部宽度和高度
position:fixed 相对于浏览器窗口是固定的,即使页面滚动也会保持在同一位置
*/
.beijing {
  background: url("https://clubimg.club.vmall.com/data/attachment/forum/202106/18/115752lzfdeb3nw6fhqjt8.jpg")
    no-repeat center center fixed; 
  background-size: 100% 100%;
  width: 100%;
  height: 100%;
  position: fixed;
}

</style>

至此完成功能，效果如最上一图。