html - 在 jpg 图像的一部分上应用 webkit 过滤器

Question

使用这个 CSS

-webkit-filter: brightness(50%);

我将亮度滤镜应用于图像，如何仅将此滤镜应用于图像的矩形部分？谢谢

Answer 1

那是不可能的，你可以在上面添加一个带有过滤器的剪辑图像。不是最优雅的解决方案，但它有效：

HTML：

<div class="holder">
  <img src="http://placekitten.com/200" />
  <img src="http://placekitten.com/200" class="brighten" />
</div>

CSS：

.holder {
  position:relative
}
img.brighten {
  top:0;
  left:0;
  position:absolute;
  clip: rect(10px, 140px, 140px, 10px);
  -webkit-filter: brightness(50%);
}

该clip属性将其限制为矩形部分。

小提琴：http: //jsfiddle.net/q3bmW/2/