Question

有没有办法使用Html / Css将彩色图片显示为灰度？ IE浏览器。没有服务器端处理。

已编辑：单色 - ＆gt;灰度

Answer 1

最好的方法是首先上传灰度图片。如果这是针对某种悬停任务，请查看创建CSS sprite。我理解这并没有完全回答这个问题，但我无法理解为什么你需要客户端图像操作。

Answer 2

试试这个：

http://snipplr.com/view/2836/grayscale-img-with-css-crossbrowser/

可能是个不错的选择......

希望它有所帮助！

Answer 3

除了canvas之外，至少在某些浏览器（例如Firefox）中，您可以使用SVG过滤器。有关示例，请参阅this slide（按钮2调用的过滤器几乎可以执行您想要的操作）。

Answer 4

我想我发现了另一种非常好的PHP方法！

检查出来：

<?php
$img = @imagecreatefromgif("php.gif");

if ($img) $img_height = imagesy($img);
if ($img) $img_width = imagesx($img);

// Create image instances
$dest = imagecreatefromgif('php.gif');
$src = imagecreatefromgif('php.gif');

// Copy and merge - Gray = 20%
imagecopymergegray($dest, $src, 0, 0, 0, 0, $img_width, $img_height, 20);

// Output and free from memory
header('Content-Type: image/gif');
imagegif($dest);

imagedestroy($dest);
imagedestroy($src);

?>

当我玩PHP GD lib时，我记得你的问题。

祝你好运！告诉我它是否有任何好处......

特鲁法

Answer 5

这不是灰度，但不透明度给用户带来了残疾感：

Stilesheet：

.opaque { 
 -khtml-opacity:.50; 
 -moz-opacity:.50; 
 -ms-filter:”alpha(opacity=50)”; 
  filter:alpha(opacity=50); 
  opacity:.50; 
  }

HTML：

<img class="opaque".... />

此解决方案是跨浏览器，适用于所有最近的浏览器，IE8，旧版本的Safari。

将彩色图片显示为单色

5 个答案: