CSS背景混合模式不适用

Question

我有两个div，一个是全屏背景图像，另一个是带标记的条。

<div class="home">
    <div class="home-bar">
    </div>
</div>

我试图让home.bar课程具有screen的混合效果，我尝试这样做

.home{
    position:absolute;
    z-index:-99;
    bottom:70px;
    width:100%;
    height:100%;
    min-height:100%;
    max-height:100%;
    background-color: transparent;
    background-image:url('img/home-hero.jpg');
    background-repeat: no-repeat;
    background-position:center center;
    background-size:cover;
}

.home-bar{
    position:absolute;
    height:150px;
    width:100%;
    bottom:20px;
    background-color:red;
    background-blend-mode: screen;
}

但是我无法达到预期的效果。如何让.home-bar屏幕显示.home的顶部？