Question

我从来没有真正使背景图像能够按预期在CSS中工作。始终以HTML设置图像，然后对其进行格式化。但是我认为这次我会做对的。另外，我要为此添加图片，这样问题就会加起来。

我在做什么错？另外，overflow: hidden无法正常工作，并且视口似乎很奇怪。也许是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>

HTML与CSS背景图片

1 个答案: