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

18 浏览
0 Comments

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

有没有一种简单的方法使用 HTML/CSS 将彩色位图显示为灰度图像？

它不需要与 IE 兼容（我想这是不可能的） - 如果它在 FF3 和/或 Sf3 中可以使用，那对我来说就足够了。

我知道可以使用 SVG 和 Canvas 实现它，但现在似乎需要大量的工作。

有没有一种真正懒惰的方法来实现这个？

admin 更改状态以发布 2023年5月23日
0

2 答案

0 Comments

继承自brillout.com的回答，以及Roman Nurik的回答，并有所放松‘不能使用SVG’的要求，你可以在火狐浏览器中仅使用单个SVG文件和一些CSS对图片进行黑白化处理。

你的SVG文件将如下所示：

将其保存为resouces.svg文件，从现在开始，你可以将其应用到任何想改变为灰度的图片上。

在你的CSS中，你可以通过

属性引用火狐浏览器特有的filter属性：

.target {
    filter: url(resources.svg#desaturate);
}

如果感觉需要，你也可以添加MS专有的属性，将这个类应用到任何你想转换为灰度的图片上（支持Firefox＞3.5，IE8）。

编辑：这里有一篇不错的博客文章，描述了在SalmanPK的回答中使用新的CSS3filter属性和这里描述的SVG方法相结合。 通过使用这种方法，你最终会得到类似于以下内容：

img.desaturate{
    filter: gray; /* IE */
    -webkit-filter: grayscale(1); /* Old WebKit */
    -webkit-filter: grayscale(100%); /* New WebKit */
    filter: url(resources.svg#desaturate); /* older Firefox */
    filter: grayscale(100%); /* Current draft standard */
}

更多浏览器支持信息在这里。

0
0 Comments

支持CSS滤镜已经在Webkit中开放了。因此，我们现在有了跨浏览器的解决方案。

img {
  filter: gray; /* IE6-9 */
  -webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */
  filter: grayscale(1); /* Microsoft Edge and Firefox 35+ */
}
/* Disable grayscale on hover */
img:hover {
  -webkit-filter: grayscale(0);
  filter: none;
}


那么Internet Explorer 10怎么办？

你可以使用一个名为 gray 的Polyfill工具。

0