Отображение цветной картинки в монохромном режиме

Question

Есть ли способ отобразить цветное изображение в оттенках серого с помощью Html / Css?То есть.без обработки на стороне сервера.

Отредактировано: монохромный -> оттенки серого

Answer 1

Лучший способ - загрузить картинку в градациях серого.Если это для какой-то задачи наведения, посмотрите на создание CSS sprite .Я понимаю, что это не дает полного ответа на вопрос, но я не могу понять, зачем вам нужно манипулирование изображениями на стороне клиента.

Answer 2

Это не оттенки серого, но непрозрачность дает пользователю ощущение отключенного:

Таблица стилей:

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

HTML:

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

Это решениекросс-браузер, работает со всеми последними браузерами, IE8, старыми версиями Safari.

Answer 3

Я думаю, я нашел другой очень хороший способ с 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.

Удачи! скажи мне, если это хорошо ...

Trufa

Answer 4

Помимо холста, по крайней мере, в некоторых браузерах (например, Firefox) вы можете использовать фильтры SVG.Например, см. этот слайд (кнопка 2 вызывает фильтр, который выполняет почти все, что вам нужно).

Answer 5

Попробуйте:

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

Может быть хорошей альтернативой ...

Надеюсь, это поможет!