Vue-cli 中为单独页面设置背景图片铺满全屏的方法

原创于 2020-05-10 17:30:29 发布 · 2.1k 阅读

4 ·

CC 4.0 BY-SA版权

Vue 专栏收录该内容

43 篇文章

订阅专栏

本文介绍了一个常见的网页设计问题，即当背景图片设置为100%高度时，图片仅填充内容区域而非整个屏幕。通过为元素添加fixed定位和100%宽度的解决方案，确保了背景图片能够完全覆盖屏幕。

<template>
    <div id="logo">
    </div>
</template>
<script>
  import meadiaurl from '../../api/mediaurl'
    export default {
        name: "logo"
</script>

<style scoped>
  #logo{
    background: url("../../assets/images/Login.png");
    background-size: 100% 100%;
    height: 100%;
  }
</style>

如果像以上代码写，高度为100%时，会发现背景图片只是内容撑起来的，却不能使整个屏幕铺满背景图；

解决方案：

我们要让#logo脱离文档流，为他添加个fixed属性

  #logo{
    background: url("../../assets/images/Login.png");
    background-size: 100% 100%;
    height: 100%;
    position: fixed;
    width: 100%
  }

以上是本章全部内容