css - 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 顶部进行筛选？