html - 背景图像未显示全高

Question

当页面正常时，我得到这个背景图像的大小合适，但是当我添加足够的文本时，你必须开始滚动，图像不会覆盖整个页面。图像比它显示的要高，但是当我改变高度时，图像变得更大，我不知道如何显示图像的其余部分。有谁知道如何做到这一点？

.bc-grnd-img {
    background-image: url("https://media.istockphoto.com/photos/little-cute-dumpy-frog-with-green-background-picture-id694848990?k=20&m=694848990&s=612x612&w=0&h=9tBJzT_Efz0GqI30Je72vvkqtSCQ5Deb_RRCdsG-e0c=");
    filter: blur(8px);
    -webkit-filter: blur(8px);
    height: 500px;
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    top: 0px;
    z-index: -1;
}

<div class="bc-grnd-img"></div>

标签： htmlcssbackgroundbackground-image

Answer 1

您在 css 中有错误，我们不使用图片链接，请下载图片

.main{
      width: 100%;
      background: linear-gradient(to top, 
      rgba(0,0,0,0.5)50%,rgba(0,0,0,0.5)50%), url(1.jpg);
      background-position: center;
      background-size: cover;
      height: 109vh;
    }