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

Question

I'm currently making a program that allows you to change image properties at will. Whenever I change the image hue it will also change the image border color (if there is one). Is there any way to avoid this and keep the border color to what it was set to? I haven't really tried anything since there's nothing on the internet and I have no idea how I could fix this.

Answer 1

You can just wrap your image in a container of the same size. Apply filters to elements inside this container, and set the border on the container.

 .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>