zoukankan      html  css  js  c++  java
  • 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;
         100%
      }
    

    以上是本章全部内容

  • 相关阅读:
    攀岩
    插入排序
    runtime error
    vector
    旅行家
    九键字母组合
    [蓝桥杯][基础训练]Sine之舞
    代码计算程序运行的时间
    max_element
    distance
  • 原文地址:https://www.cnblogs.com/wjlbk/p/12884653.html
Copyright © 2011-2022 走看看