未覆盖整个空间的背景图像
未覆盖整个空间的背景图像
提问于 2017-07-26 21:06:37
我确信我错过了一些简单的东西，但我似乎找不到它。
在michelleforboe.com上，我试图让背景图像覆盖整个div空间。我使用calc来设置div的高度，但是div的分辨率比它应该的要高一些。此外，如果您向下滚动和向上滚动，图像底部的黑条甚至更大。在图像的顶部有另一个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%;
}回答 1
Stack Overflow用户
发布于 2017-07-26 21:18:03
试试这个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;
} 页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/45327935
复制相关文章
相似问题
腾讯云开发者
