悬停时将图像从灰色变为真正的深黑色

Question

将鼠标悬停在图像上时，我希望它变黑。图片默认为灰色。

img:hover {
  filter: grayscale(100%) brightness(1.6) saturate(2) contrast(150);
}

<img src="https://i.stack.imgur.com/wpQiz.png">

Answer 1

使用反相过滤器，您会更近：

img:hover {
 filter: invert(1);
}

<img src="https://i.stack.imgur.com/wpQiz.png" >

或者只是brightness(0)

img:hover {
 filter: brightness(0);
}

<img src="https://i.stack.imgur.com/wpQiz.png" >

Answer 2

为什么不反过来考虑，使用黑色图像并以HANDLE hread; HANDLE hwrite; SECURITY_ATTRIBUTES sa = { sizeof(sa),NULL,TRUE }; CreatePipe(&hread, &hwrite, &sa, 0); int fd = _open_osfhandle(intptr_t(hwrite), _O_TEXT); FILE *fp = _fdopen(fd, "w"); setvbuf(fp, NULL, _IONBF, 0); _dup2(_fileno(fp), _fileno(stdout)); TCHAR buffer[64] = { 0 }; DWORD bytesRead; //_write(fd, "_write", 6); // works //fprintf(fp, "fprintf"); // works printf("printf"); ReadFile(hread, buffer, sizeof(buffer), &bytesRead, NULL); 级来改变视觉效果？

opacity

img {
  width: 100px;
  height: auto;
  opacity: .5;
  transition: opacity .25s;
}
img:hover {
  opacity: 1;
}

Answer 3

不能执行以下操作吗？ （不过，您需要2张单独的图片，一张为灰色，一张为黑色）

<img src='../img/badge/graydot.png' onmouseover="this.src='../img/badge/blackdot-hover.png';" onmouseout="this.src='../img/badge/graydot.png';" />