kk总结了两种方式实现背景图铺满整个屏幕并且无滚动出现的方式，下面来一一介绍：

方法一：

先上个效果图


html页面：一个用来放背景图的容器.bg

<body>
    <div class="main">
        <div class="bg"></div>
    </div>
<script>

style样式：.bg的样式


<style>
    body{
        margin:0;
        padding:0;
    }
    div.bg{
        /*方法一*/
        position:fixed;
        top:0;
        left:0;
        /*以上三句是让整个span放在屏幕的最左上方*/
        width:100%;
        height:100%;
        /*以上两句实现全屏大小*/
        background:url('img/banner01.jpg') no-repeat center 0;/*引入背景图，不重复出现*/
        background-size:cover;/*图片随屏幕大小同步缩放,但是图片画面可能只显示一部分*/
    }

</style>

方法二：

效果图：

这个显示简直完美！

style样式如下：

<style>
    body{
        margin:0;
        padding:0;
    }
    div.bg{
        width: 100%;
        height:100vh;
        background:url("img/banner01.jpg") no-repeat    ;
        background-size:100% 100%; /*随着原始比例缩放*/

    }

</style>
注：vh:表示 显示窗口的高度，设置了100vh后，div.bg的高度会随着窗口的大小改变儿变化；

今天先到这里啦，各位大神有什么别的更好的方法，欢迎一起讨论哦！

# css # css3
Logo
向您推荐>>Eolink开发者社区

权威｜前沿｜技术｜干货｜国内首个API全生命周期开发者社区

更多推荐

ELK实现containerd的容器日志采集展示【基于logging的全栈监测】

企业级ELK Stack构建介绍

avatar 云原生

深入理解 Mocha 测试框架：从零实现一个 Mocha

前言什么是自动化测试自动化测试在很多团队中都是Devops环节中很难执行起来的一个环节，主要原因在于测试代码的编写工作很难抽象，99%的场景都需要和业务强绑定，而且写测试代码的编写工作量往往比编写实际业务代码的工作量更多。在一些很多业务场景中投入产出比很低，适合写自动化测试的应该是那些中长期业务以及一些诸如组件一样的基础库。自动化测试是个比较大的概念，其中分类也比较多，比如单元测试，端对端测试，集

avatar 云原生

(20200916 Solved)docker-compose up创建容器自动退出

问题描述如题，创建容器后自动退出了。并且docker start container无效解决方案原因是缺失了控制终端的配置，需要在docker-compose.yml中增加tty:true ，有时候这样也不行，需要再增加一个command:/bin/bash，命令不一定是这个，需要是一个不会退出的命令，然后用-d后台启动容器。Referencesdocker-compose启动容器后自动退出...

avatar 云原生