Question

我试图让背景图像覆盖整个屏幕的宽度和高度，而我似乎无法用高度来理解它。

我正在按照these提示来实现它，但我没有把它弄好。它只会与内部div内容一样高。

这是html和css，您也可以在jsfiddle中看到它：

HTML：

routes.MapRoute(null, "MyUrl", new { controller = "Home", action = "MyUrl" });

CSS：

<div class="navbar"></div>
<div class="background-container">
    <div class="bg">
        <div class="container">
            JOIN US!
        </div>
    </div>
</div>

Answer 1

默认情况下，正文标记不是全高。你需要指定。

html, body {
    height: 100%;
}

<强> Demo

要防止产生滚动，请删除边距和填充。

<强> Demo 2

Answer 2

如果可行，请将position: absolute; width: 100%; height: 100%添加到.bg课程。

Answer 3

问题是.bg只是你看到的那个容器。如果你想像你正在描述的那样将背景改为.bg并且它可以正常工作

body {
    height: 100%;
    background: url(https://images.unsplash.com/photo-1431578500526-4d9613015464?q=80&fm=jpg&s=169b4f4e6f3882a03b6b93b2e6848052) no-repeat center center fixed;
    -moz-background-size: cover;
    -webkit-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    //add this if you want it to stay fixed
    background-attachment: fixed;
}

或者你可以将.bg位置设为绝对或固定，这样它就可以达到100％的高度。

Answer 4

默认的html获得一个边距，因此它不会延伸到最后，所以添加margin：0和padding：0，用于延伸到浏览器的角落。接下来的宽度：100vw;暗示100％的视口宽度，以便进行响应式网页设计，同样高度：100vh; 100％的视口高度

添加CSS规则

 body, html {
    margin:0;
    padding:0;
    height:100vh;
    width:100vw;
 }

如何将背景图像调整为屏幕大小

4 个答案: