将webkit过滤器应用于jpg图像的一部分

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属性将其限制为rectanglular部分..

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