javascript - 如何阻止 Hue 更改图像边框颜色 Javascript

Question

我目前正在制作一个允许您随意更改图像属性的程序。每当我更改图像色调时，它也会更改图像边框颜色(如果有的话)。有什么办法可以避免这种情况并将边框颜色保持为设置的颜色吗？我还没有真正尝试过任何东西，因为互联网上没有任何东西，而且我不知道如何解决这个问题。

Answer 1

您可以将图像包裹在相同大小的容器中。将过滤器应用于此容器内的元素，并在容器上设置边框。

.container {
  border: 16px solid red;
  width: 256px;
  height: 256px;
}

.container img {
  filter: hue-rotate(90deg);
  -webkit-filter: hue-rotate(90deg);
}

<div class="container">
  <img src="https://picsum.photos/id/888/256/256">
</div>