时间戳

首页 > 解决方案 > 反转图像颜色

html - 反转图像颜色

问题描述

我有一个要在 vue 模板中导入的图像，并且图像是黑色的。我希望图像是这种颜色（#0768fd）如何得到这个。

我尝试分配类和样式，但没有用

<img alt="icon"
:src="require(`@/assets/images/group-icon.png`)                   "
class="icon-class invert"/>

.icon-class {
  width: 24px !important;
  height: 24px !important;
  margin: 0 6px 0 0;
  padding: 2px;
  color:#0768fd;
  background-color:#0768fd;
  border-radius: 50%;
  border: solid 1px black !important;
}
.invert {
  filter: invert(0.6);
}

标签： htmlcssvue.jssass

解决方案

生成 CSS 过滤器（足够接近）以针对 HEX 代码：https ://codepen.io/sosuke/pen/Pjoqqp

img {
  height: 68px;
  filter: invert(26%) sepia(100%) saturate(1711%) hue-rotate(207deg) brightness(99%) contrast(111%);
}
<img src="https://image.flaticon.com/icons/png/512/32/32441.png" alt="" />

推荐阅读