如何仅将亮度效果应用于图像的一部分?

这是DEMO @ JS FIDDLE

如果我想将此亮度效果仅应用到距图像最底部30像素处。如何更改我的代码?

的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);">
戈帕拉茹(Gopalraju)

尝试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);
}

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何使用 CSS 仅将颜色应用于 SVG 图标的一部分?

将QGraphicsColorizeEffect应用于QGraphicsSvgItem的一部分(仅应用于svg本身)

将pandoc_args仅应用于rmarkdown文档的一部分-例如两列

仅将笔触破折号样式应用于路径的一部分

将 CSS 样式应用于画布的一部分

将StandardScaler应用于数据集的一部分

如何将公式应用于 R 数据框列的一部分?

LibGdx是否可以将着色器应用于精灵批次的一部分以产生水效果?

如何仅显示图像的一部分

如何仅分析图像的一部分?

在Matlab中使用spmd(并行)将函数应用于矢量的一部分

当图标是循环的一部分时,如何仅将 css 应用于悬停在其上的特定图标

将设计应用于Android中的一部分按钮

如何将行转换为列但仅适用于python中表的一部分?

仅对图像的一部分应用腐蚀

如何使 RecyclerView 的 ItemTouchHelper 仅作用于列表的一部分(拖放)

如何仅映射图像源属性的一部分

Fabric.js:如何仅显示图像的一部分?

如何使用OTSU阈值取阈值仅图像的一部分?

如何仅将我的精灵图像的一部分重复作为div的背景

根据另一个单元格的内容将格式应用于单元格的一部分

如何仅解析JSON的一部分?

如何仅编码URL的一部分

如何仅更改状态的一部分?

如何仅渲染Sprite的一部分

如何仅加粗段落的一部分?

如何将图像放置在其他图像的一部分上

如何仅将多维数组的一部分展平一层?

如何显示大图像的一部分?