Question

我是HTML / CSS的新手，但我无法使div的背景图片全屏显示。我使用了background-size：cover，但它在屏幕的左侧和右侧仍然有较大的空白。

HTML：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta viewport="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
        <link rel="stylesheet" href="styles.css">
    </head>
    <body>
        <div class="container">
        </div>
    </body>
<html>

CSS

.container{
    height:100vh;
    width:100vw;
    background-image:url("city.jpeg");
    background-repeat:no-repeat;
    background-size:cover;
    background-position:center;
    opacity: 0.8;
}

Answer 1

请尝试使用img: {width: 100% height:100%}。最好的方法是检查元素并检查包含图像的div是否限制其大小。您可以使用firefox进行检查（我更喜欢chrome，而不是chrome，因为它可以在视觉上更好地显示任何元素的大小）。

Answer 2

默认情况下，body周围有一个空白。试试这个：

body {
  margin: 0;
}

如何让背景图片覆盖整个视口屏幕？

2 个答案: