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


<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%
  }

以上是本章全部内容

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM