时间戳

首页 > 解决方案 > 如何阻止 Hue 更改图像边框颜色 Javascript

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

问题描述

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

标签： javascripthtmlcss

解决方案

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

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

推荐阅读