Question

我确信我错过了一些简单的东西，但我似乎无法找到它。

在michelleforboe.com上，我试图让背景图像覆盖div的整个空间。我使用calc来设置div的高度，但是div的分辨率略高于它应该的高度。此外，如果你向下滚动＆amp;备份时，图像底部的黑条更大。在图像的顶部还有另一个div;我原本以为这可能会造成额外的空间，但我认为不是。有人看到我错过了吗？

.home-section-1 .wrap {
    margin-left: 0;
}
.home .site-inner {
    margin-top: 140px; 
} 
.home-section-1.widget-area {
    background-size: 100% calc(100vw/2.9);
    background-position: 50% 50%; 
    height: calc(100vw/2.9);
    padding-top: 0;
    padding-bottom: 0;
} 
#text-7 {
  height: calc(100vw/2.9);
}
#text-7 .widget-wrap {
    height: 100%;
    position: relative; 
}
#text-7 .widget-wrap .textwidget {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
#text-7 a.button {
    font-size: 2vw;
    padding: 1vw;
}   
.home-section-1 .widget-wrap {
    width: 50%;
}

Answer 1

试试这个css

.home-section-1.widget-area {
background-size: cover !important;
background-position: 50% 50%; 
height: auto;
padding-top: 0;
padding-bottom: 0;
}

如果您想全屏显示图像，请从css中删除高度

.home-section-1.widget-area {
background-size: cover !important;
background-position: 50% 50%;
padding-top: 0;
padding-bottom: 0;
}

背景图像不覆盖整个空间

1 个答案: