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

Question

我在 div 中有一张横跨我页面的背景图片。图像顶部有一个透明 block 。

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

#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>

对于您的类(class)，在 Chrome 和 IE11 中调整大小似乎效果很好(尽管一些图像开始被截断，因为 background-size: cover; 保留图像纵横比)在 Win7 上，没有像您在图片中提到的那样的白色 block 。看起来你在 Win8 机器上，也许在 IE 中？

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

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