调整大小浏览器或旋转屏幕时丢失图像

Question

我的背景图片在div内延伸到我的页面。图像顶部有透明块。

当我调整浏览器大小或在移动设备上旋转页面时，部分图像会消失。

#home-area 
{
    background: url("../images/home-bg.jpg") no-repeat;
    background-position: 50% 50%;
    background-size:cover;
    height: 100vh;
    width: 100%;
}

.overlay 
{
    background: rgba(43, 191, 217, 0.30);
    height: 100vh;
    width: 100%;
}

我的页面顶部还有一个position: fixed菜单。

屏幕调整大小时图像没有调整大小的任何想法？

Answer 1

设置一些简单的标记：

<div id="home-area">
    <div class="overlay">
    </div>
</div>

对于你的课程，重新调整大小似乎运行良好（虽然一些图像开始被切断，因为background-size: cover;保留图像宽高比）在Chrome和IE11上的Win7，没有像你这样的白色块似乎在图片中提到。看起来你可能在IE中的Win8机器上？

虽然当我在IE中模拟不同的分辨率时，滚动时会出现一些非常不稳定的行为。

也许这会有助于更多Perfect Full Page Background Image