是否可以仅对div内的文本使用亮度滤镜？

Question

是否可以仅对div内的文本使用CSS亮度过滤器属性？例如，这是HTML代码和CSS代码：

<div id="demo">
    <input type="checkbox" id="toggle" name="toggle" />
    <label for="toggle" id="toggle-label" >
        <div id="menuContainer">
            <div id="menuText">Menu</div>
            <div id="content">|||</div>
        </div>
    </label>
</div>

#demo{
    background:blue;
    width:100%;
    height:50px;
}

#toggle {
    opacity:0;
    position:absolute;
}
#menuContainer{
    position:absolute;
    right:20px;
    color:#fff;
    background:rgba(0,0,255,0);
    -webkit-filter: brightness(100%);
    filter: brightness(100%);
    -webkit-transition:all .4s ease;
    -moz-transition:all .4s ease;
    transition:all .4s ease;
}
#menuText{
    padding-top:12px;
    padding-right:20px;
    font-size:20px;
    float:left;
}
#content{
    font-weight:900;
    padding-top:11px;
    padding-bottom:8px;
    font-size:25px;
    float:right;
    transform:rotate(90deg);
}
#menuContainer:hover{
    -webkit-filter: brightness(150%);
    filter: brightness(150%);
}
#menuContainer:after{
    clear:both;
}

JsFiddle：https://jsfiddle.net/cqveLena/

在这种情况下，当我将menuContainer的背景更改为蓝色（但它也会使整个div与文本一起变亮）时亮度起作用，但是当我使用例如rgba时将亮度设置为蓝色时它不起作用然后用alpha隐藏它（它会略微提亮文字，但之后会停止）。

我也尝试在menuText和内容上单独使用它，但它也不起作用。

是否可以仅在文字上使用亮度滤镜？我没有更多的想法。

也许我错过了什么？也许它可以用javascript完成？我还不知道如何使用jQuery。