CSS 在HTML / CSS中将图像转换为灰度

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS 在HTML / CSS中将图像转换为灰度相关的知识，希望对你有一定的参考价值。

/*
 * First create a file filters.svg with the following contents 
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
   "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg">
  <filter id="grayscale">
    <feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0"/>
  </filter>
</svg>
*/

img {
    filter: url(filters.svg#grayscale); /* Firefox 3.5+ */
    filter: gray; /* IE5+ */
    -webkit-filter: grayscale(1); /* Webkit Nightlies & Chrome Canary */
}

img:hover {
    filter: none;
    -webkit-filter: grayscale(0);
}

以上是关于CSS 在HTML / CSS中将图像转换为灰度的主要内容，如果未能解决你的问题，请参考以下文章

如何在 Python 中将 RGB 图像转换为灰度图像？

在 DLIB 中将 RGB 图像转换为灰度图像

将灰度图像转换为 rgb 图像并在 matlab 中将其替换为 imread()

在IOS中将字节流转换为PDF、html、css文件

在 ImageMagick 命令行中将 RGB 转换为灰度

如何使用 CIFilter 在 Swift 中将 UIImage 转换为灰度？