如何仅将亮度效果应用于图像的某个部分？

Question

此处DEMO @ JS FIDDLE

如果我想将此亮度效果仅应用于图像最底部的30px。 如何更改我的代码？

HTML

Before Effect<br />
    <img src="https://i.ytimg.com/vi/Zlot0i3Zykw/mqdefault.jpg">
    <br />
    <br />
    <br />
After Effect<br />
    <img src="https://i.ytimg.com/vi/Zlot0i3Zykw/mqdefault.jpg" style="
     -webkit-filter: brightness(0.5);
     -moz-filter: brightness(0.5);
     -o-filter: brightness(0.5);
     -ms-filter: brightness(0.5);
     filter: brightness(0.5);">

Answer 1

尝试使用覆盖div包裹图片而不是使用brightness。

小提琴：https://jsfiddle.net/pgetv64u/1/

.overlay{
    position:relative;
    display:inline-block;
}

.overlay:after{
    position:absolute;
    content:'';
    display:block;
    top:0;
    left:0;
    right:0;
    bottom:30px;
    background:rgba(0,0,0,.5);
}