HTML 与 CSS 背景图片

Question

我从来没有真正让背景图像像它应该的那样在 CSS 中工作。始终在 HTML 中设置图像，然后对其进行格式化。但我想这次我会做对的。另外，我将向其中添加图片，这样问题就会加起来。

我做错了什么？此外，overflow: hidden 不起作用，视口(viewport)看起来很奇怪。也许这是 background-image 格式的问题？

好像不允许我添加图片。所以无法添加屏幕截图。

    body {
        overflow-anchor: hidden:
        margin: 0px;
    }

    /* The sky defined plus the sea as a box-reflection of the sky in the lake*/
    #sky {
        background: linear-gradient( rgb(1, 71, 202), #FFF);
        position: absolute;
        height: 50vh;
        width: 100vw;
        -webkit-box-reflect: below;
        -webkit-filter: grayscale(0%);
        z-index: 0;
    }

    /* The sun as a CSS radial with added blur function */
    #sun {
        background-color: white;
        top: 25vh;
        left: 33vh;
        border-radius: 50%;
        height: 50px;
        width: 50px;
        -webkit-filter: blur(1px);
        position: relative;
        z-index: 10;
    }


    /* Image of forest in png-format with a tranparency at the top of the treeline */
    #lakeline {
        background-image: url("../images/lakeline.png")
        top: calc(50vh - 75px);
        align-content: center;
        position: absolute;
        -webkit-filter: blur(0px) grayscale(0%);

        -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.8, transparent), to(white));
        z-index: 40;  
      }

Answer 1

我不是 100% 确定您在这里尝试实现的目标，但如果您正在寻找容器背景图像，这应该可以满足您的需要。

background-size 属性为您提供了一些额外的对齐选项。

编辑:在此处添加了分层图像背景。

.background{
background: #002a43 url(https://s3.amazonaws.com/libapps/accounts/27060/images/example.png) top left no-repeat;
background-size: cover;
}

.background-multiple{
background-image: url(https://s3.amazonaws.com/libapps/accounts/27060/images/example.png), url(https://img03.deviantart.net/c90e/i/2012/222/2/7/mountain_stock_1_by_solanaceae85-d5alag2.jpg);
  background-position: right top, right top;
  background-repeat: no-repeat,  no-repeat;
  background-size: 150px, 450px;

}

<div class='background'>
Single Image Here<br><br><br>
Single Image Here<br><br><br>
Single Image Here<br><br><br>
Single Image Here<br><br><br>
</div>

Edit:
<div class='background-multiple'>
Multiple Image Here<br><br><br>
Multiple Image Here<br><br><br>
Multiple Image Here<br><br><br>
Multiple Image Here<br><br><br>

</div>