小贝子编程

如何只对图像的一部分应用亮度效果?



这里是DEMO @ JS FIDDLE

如果我想应用这个亮度效果只到30px的最底部的图像。我如何更改我的代码?

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);">

尝试用覆盖的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);
}

相关内容

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium