vue添加背景图，只显示一半问题解决

154 阅读 0 评论 102 点赞

我是靠谱客的博主过时乐曲，这篇文章主要介绍vue添加背景图，只显示一半问题解决，现在分享给大家，希望可以做个参考。

一：如何添加背景图

1：在页面所有div最外层写一个<div class="shopping-classify">.....</div>

在我的代码中如下

<div class="shopping-classify">
  <div>
.....其他内容
</div>
</div>

2：在<style>内写 {注意，一定放在style样式地最外层}

</style>
//登录背景图
.shopping-classify {
  display: flex;
  justify-content: center;
  align-items: stretch;
  background-image: url(../../assets/edit.png);
  background-size: 100% 100%;
  height: 100%;
  width: 100%;
  position: fixed;
}
</style>

然后就大功告成了

只显示一半地问题解决着重点：

最初只能展示一半：在.shopping-classify {。。。}内加了position: fixed; 修饰就可以全屏铺满展示了