背景图片全屏答案

【问题标题】：Background image fullscreen背景图片全屏
【发布时间】：2016-04-14 04:26:42
【问题描述】：

所以我正在尝试创建一个包含两个 div 元素的网页。在一个，图像。第二个是background-color。不过有一个问题。图像没有到达屏幕边缘！我怎样才能做到这一点？我不想使用宽度的定义器，我希望它在所有东西上都能很好地缩放。

<head>
        <title>Derr</title>
        <style>
            body {
                font-family: "Courier New", Courier, monospace;
            }
            .fadein {
                background-image: url("img.bmp");
                height: 549px
            }
        </style>
    </head>
    <body>
        <div class="fadein">
            <br><br><br><br><br>
        </div>
    </body>

使用 Chrome。

【问题讨论】：

尝试添加：background-size: cover; 并删除图像的高度属性。
不。 div 中应该没有任何内容，所以这是一个 nogo。

标签： html css image web

【解决方案1】：

你必须这样做

   body{
     margin:0px;
   } 
    
    .fadein{
    background-image: url(http://lorempixel.com/400/200);
    background-position: center;
    background-size: cover;
    height: 100vh;
    }

<body>
        <div class="fadein">
           
        </div>
    </body>

【讨论】：

不，页面两侧仍有白条。
你给body 'margin: 0px' 了吗？因为我给你的代码填写了所有内容
不，页面周围还有小白条
并在“整页”中运行 sn-p 代码，您会看到白条吗？
甚至全屏