Преобразование изображения в оттенки серого в HTML / CSS

619

Есть ли простой способ отобразить цветное растровое изображение в оттенках серого с помощью Just HTML/CSS?

Он не должен быть IE-совместимым (и я думаю, что не будет) - если он работает в FF3 и / или Sf3, для меня этого достаточно.

Я знаю, что могу сделать это и с SVGCanvas, но сейчас кажется, что это большая работа.

Есть ли действительно ленивый способ сделать это?

кругозор
источник
14
«Это не должно быть IE-совместимым (и я думаю, что не будет)» ?? IE предоставляет набор фильтров DX с 1997 года (IE4), который выполняет эту работу с помощью простого CSS и многого другого. Теперь они отказались от фильтров DX в IE10 и строго следуют стандартным фильтрам на основе SVG. Возможно, вы захотите взглянуть на это и это демо .
вулкан ворон
8
@vulcanraven Это не просто «CSS» - если вы отключите активные сценарии в IE, фильтры перестанут работать.
Робертc
3
@robertc, вот и все правильно. Напротив, если вы отключите javascript в любом браузере, почти все RIA, включая Stackoverflow, перестанут работать (если веб-разработчик не использует откат версии только для HTML).
вулкан ворон
2
Просто используйте CSS stackoverflow.com/questions/286275/gray-out-image-with-css/… Получите мой ответ на этот вопрос
Саката Гинтоки

Ответы:

728

Поддержка 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;
}
<img src="http://lorempixel.com/400/200/">


А как насчет Internet Explorer 10?

Вы можете использовать polyfill как серый .

Салман Аббас
источник
1
@CamiloMartin CSS-фильтры поддерживаются только Chrome 18+
Салман фон Аббас
2
Обновление: последняя стабильная версия Google Chrome (19) теперь поддерживает фильтры CSS. Ура! =)
Салман фон Аббас
6
Есть ли решение для Opera?
Рустам
23
Итак, каково решение для IE10?
Том Ожер
2
Для потомков: @TomAuger, этот Q & A имеет специальные инструкции для IE10.
Барни
127

Исходя из ответа brillout.com , а также Романа требование «без SVG», вы можете обесцветить изображения в Firefox, используя только один файл SVG и немного CSS.

Ваш SVG-файл будет выглядеть так:

<?xml version="1.0" encoding="UTF-8"?>
<svg version="1.1"
     baseProfile="full"
     xmlns="http://www.w3.org/2000/svg">
    <filter id="desaturate">
        <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>

Сохраните его как resources.svg, теперь он может быть повторно использован для любого изображения, которое вы хотите изменить на оттенки серого.

В вашем CSS вы ссылаетесь на фильтр, используя специфическое filterсвойство Firefox :

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

Также добавьте проприетарные MS, если хотите, примените этот класс к любому изображению, которое вы хотите преобразовать в оттенки серого (работает в Firefox> 3.5, IE8) .

edit : вот хороший пост в блоге, который описывает использование нового filterсвойства CSS3 в ответе SalmanPK в сочетании с подходом 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 */
}

Дополнительная информация о поддержке браузера здесь .

robertc
источник
6
В webkit вы делаете это: -webkit-filter: grayscale(100%);затем это: -webkit-filter: grayscale(0);чтобы удалить его.
SeanJA
@SeanJA Спасибо за обновление, WebKit начал реализацию этого материала в декабре
Роберт
Я вижу это в бета-версии Chrome и на моем ноутбуке с Linux, и на моей машине с win7. Похоже, что он не работает в chrome stable в linux (но, опять же, возможно, версия linux находится за windows).
SeanJA
1
Этот метод отлично работает для меня в Chrome, но не влияет на Safari. В FF это делает мои изображения невидимыми до тех пор, пока они не зависнут.
colmtuite
85

Для Firefox вам не нужно создавать файл filter.svg, вы можете использовать схему URI данных .

Принятие кода CSS первого ответа дает:

filter: url("data:image/svg+xml;utf8,<svg%20xmlns='http://www.w3.org/2000/svg'><filter%20id='grayscale'><feColorMatrix%20type='matrix'%20values='0.3333%200.3333%200.3333%200%200%200.3333%200.3333%200.3333%200%200%200.3333%200.3333%200.3333%200%200%200%200%200%201%200'/></filter></svg>#grayscale"); /* Firefox 3.5+ */
filter: grayscale(100%); /* Current draft standard */
-webkit-filter: grayscale(100%); /* New WebKit */
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%); 
-o-filter: grayscale(100%);
filter: gray; /* IE6+ */

Позаботьтесь о том, чтобы заменить строку «utf-8» на кодировку вашего файла.

Этот метод должен быть быстрее, чем другой, потому что браузеру не нужно будет делать второй HTTP-запрос.

mquandalle
источник
3
Просто примечание для сохранения головной боли: YUI Compressor удаляет пробелы в URL-адресах данных. Поэтому вы можете рассмотреть возможность использования другого минификатора, если хотите использовать это решение.
Malte
6
@Malte Или, может быть, просто заменить пробелы на строку "% 20"?
mquandalle
@mquandalle, к сожалению, IE10 не поддерживает фильтр: grey blogs.msdn.com/b/ie/archive/2011/12/07/…
Jedi.za
1
На firefox мой серый очень светлый. Есть ли способ увеличить контраст или немного затемнить его? Другие браузеры выглядят великолепно.
square_eyes
27

Обновление: я сделал это в полном репозитории GitHub, включая полифилл JavaScript для IE10 и IE11: https://github.com/karlhorky/gray

Первоначально я использовал ответ SalmanPK , но затем создал вариант ниже, чтобы исключить дополнительный HTTP-запрос, необходимый для файла SVG. Встроенный SVG работает в версиях Firefox 10 и выше, а версии ниже 10 больше не занимают даже 1% мирового рынка браузеров.

С тех пор я постоянно обновляю решение в этом сообщении в блоге , добавляю поддержку постепенного перехода к цвету, поддержку IE 10/11 с SVG и частичную шкалу серого в демонстрационной версии.

img.grayscale {
  /* Firefox 10+, Firefox on Android */
  filter: url("data:image/svg+xml;utf8,<svg 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>#grayscale");

  /* IE 6-9 */
  filter: gray;

  /* Chrome 19+, Safari 6+, Safari 6+ iOS */
  -webkit-filter: grayscale(100%);
}

img.grayscale.disabled {
  filter: none;
  -webkit-filter: grayscale(0%);
}
Карл Горки
источник
14

Если вы можете использовать JavaScript, то этот скрипт может быть тем, что вы ищете. Он работает кросс-браузер и пока работает нормально для меня. Вы не можете использовать его с изображениями, загруженными из другого домена.

http://james.padolsey.com/demos/grayscale/

chrismacp
источник
11

Просто сегодня такая же проблема. Я изначально использовал решение SalmanPK, но обнаружил, что эффект отличается между FF и другими браузерами. Это потому, что матрица преобразования работает только на яркость, а не на яркость, как фильтры в Chrome / IE. К моему удивлению, я обнаружил, что альтернативное и более простое решение в SVG также работает в FF4 + и дает лучшие результаты:

<svg xmlns="http://www.w3.org/2000/svg">
  <filter id="desaturate">
    <feColorMatrix type="saturate" values="0"/>
  </filter>
</svg>

С помощью css:

img {
    filter: url(filters.svg#desaturate); /* Firefox 3.5+ */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(1); /* Google Chrome & Safari 6+ */
}

Еще одно предостережение: IE10 больше не поддерживает «filter: grey» в режиме совместимости со стандартами, поэтому для работы требуется переключение режима совместимости в заголовках:

<meta http-equiv="X-UA-Compatible" content="IE=9" />
Robertt
источник
2
Кажется, лучшее и более простое решение - было бы хорошо, если бы SalmanPK и mquandalle обновили свои решения для этого. Видимо, используемая ими матрица не работает <br> <br> Вот версия встроенных данных: filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'saturate\' values=\'0\'/></filter></svg>#grayscale");
psdie
11

Простейший способ достижения оттенков серого исключительно с помощью CSS - через filterсвойство.

img {
    -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
}

Свойство по-прежнему не поддерживается полностью и все еще требует его -webkit-filterдля поддержки во всех браузерах.

Н. К. Чаудхари
источник
7

Не похоже, что это возможно (пока), даже с CSS3 или проприетарным -webkit-или-moz- CSS-свойствами.

Тем не менее, я нашел этот пост в июне прошлого года, в котором использовались фильтры SVG для HTML. Не доступно ни в одном текущем браузере (демонстрация намекает на пользовательскую сборку WebKit), но очень впечатляет в качестве доказательства концепции.

Роман Нурик
источник
7

Для людей, которые спрашивают о игнорируемой поддержке IE10 + в других ответах, ознакомьтесь с этой частью CSS:

img.grayscale:hover {
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
}

svg {
    background:url(http://4.bp.blogspot.com/-IzPWLqY4gJ0/T01CPzNb1KI/AAAAAAAACgA/_8uyj68QhFE/s400/a2cf7051-5952-4b39-aca3-4481976cb242.jpg);
}

svg image:hover {
    opacity: 0;
}

Применяется к этой разметке:

<!DOCTYPE HTML>
<html>
<head>

    <title>Grayscaling in Internet Explorer 10+</title>

</head>
<body>

    <p>IE10 with inline SVG</p>
    <svg xmlns="http://www.w3.org/2000/svg" id="svgroot" viewBox="0 0 400 377" width="400" height="377">
      <defs>
         <filter id="filtersPicture">
           <feComposite result="inputTo_38" in="SourceGraphic" in2="SourceGraphic" operator="arithmetic" k1="0" k2="1" k3="0" k4="0" />
           <feColorMatrix id="filter_38" type="saturate" values="0" data-filterid="38" />
        </filter>
      </defs>
      <image filter="url(&quot;#filtersPicture&quot;)" x="0" y="0" width="400" height="377" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="http://4.bp.blogspot.com/-IzPWLqY4gJ0/T01CPzNb1KI/AAAAAAAACgA/_8uyj68QhFE/s1600/a2cf7051-5952-4b39-aca3-4481976cb242.jpg" />
    </svg>

</body>
</html>

Для получения дополнительных демонстраций ознакомьтесь с разделом « Графика CSS3» в IE testdrive и этим старым блогом IE http://blogs.msdn.com/b/ie/archive/2011/10/14/svg-filter-effects-in-ie10.aspx.

Энни
источник
7

В Internet Explorer используйте свойство filter.

В webkit и Firefox в настоящее время нет способа обесцветить изображение исключительно с помощью CSS. так что вам нужно будет использовать canvas или SVG для решения на стороне клиента.

Но я думаю, что использование SVG более элегантно. проверьте мой блог для SVG-решения, которое работает как для Firefox, так и для webkit: http://webdev.brillout.com/2010/10/desaturate-image-without-javascript.html

И, строго говоря, поскольку SVG - это HTML, решение - это чистый html + css :-)

brillout
источник
привет, брилаут Я заметил, что твоя шкала серого на сафари не работает. Любое продолжение? Спасибо
лебедь
1
SVG это не HTML. Это совершенно другая спецификация.
Камило Мартин
@CamiloMartin Вот SVG в спецификации HTML .
Робертc
1
@robertc Эта ссылка о вставке SVG в HTML, но вот спецификация SVG и вот спецификация HTML . Тот факт, что оба они похожи друг на друга (или на XML), не означает, что они одно и то же ...
Камило Мартин
1
Но он ссылается на спецификацию SVG в ссылке ... Он не определяет SVG, просто говорит, что браузеры должны его проанализировать. Это как Javascript или CSS в этом отношении.
Камило Мартин
6

Новый способ сделать это был доступен в течение некоторого времени в современных браузерах.

background-blend-mode позволяет получить некоторые интересные эффекты, одним из которых является преобразование в оттенках серого

Значение яркости , установленное на белом фоне, позволяет это сделать. (чтобы увидеть это серым цветом)

.test {
  width: 300px;
  height: 200px;
    background: url("http://placekitten.com/1000/750"), white; 
    background-size: cover;
}

.test:hover {
    background-blend-mode: luminosity;
}
<div class="test"></div>

Яркость берется из изображения, цвет берется из фона. Поскольку он всегда белый, цвета нет.

Но это позволяет гораздо больше.

Вы можете анимировать эффект, установив 3 слоя. Первым будет изображение, а вторым будет бело-черный градиент. Если вы примените режим умножения наложения, вы получите белый результат, как и раньше, на белой части, но исходное изображение на черной части (умножение на белый дает белый, умножение на черный не действует).

На белой части градиента вы получите тот же эффект, что и раньше. В черной части градиента вы накладываете изображение на себя, и в результате получается неизмененное изображение.

Теперь все, что нужно, это переместить градиент, чтобы получить эффект динамического: (наведите курсор, чтобы увидеть его в цвете)

div {
    width: 600px;
    height: 400px;
}

.test {
    background: url("http://placekitten.com/1000/750"), 
linear-gradient(0deg, white 33%, black 66%), url("http://placekitten.com/1000/750"); 
    background-position: 0px 0px, 0px 0%, 0px 0px;
    background-size: cover, 100% 300%, cover;
    background-blend-mode: luminosity, multiply;
    transition: all 2s;
}

.test:hover {
    background-position: 0px 0px, 0px 66%, 0px 0px;
}
<div class="test"></div>

ссылка

матрица совместимости

Vals
источник
1
@ Энди, я начал свой ответ, говоря в современных браузерах
vals
Как вы можете применить это, если imgтег используется для изображения неbackground: url()
Мохаммад Эльбанна
1
@MohammadElbanna Вам нужно использовать режим смешивания вместо режима фона смешивания
vals
5
img {
    -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
}
Amee
источник
4

Может быть, этот способ поможет вам

img {
    -webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
    filter: grayscale(100%);
}

w3schools.org

Юза
источник
3

На самом деле это проще сделать с помощью IE, если я правильно помню, используя собственное свойство CSS. Попробуйте это FILTER: Grayс http://www.ssi-developer.net/css/visual-filters.shtml

Метод Ax делает изображение прозрачным, а за ним черный фон. Я уверен, что вы могли бы утверждать, что это в оттенках серого.

Хотя вы не хотели использовать Javascript, я думаю, вам придется использовать его. Вы также можете использовать язык на стороне сервера, чтобы сделать это.

Алекс
источник
У меня даже нет коробки с Windows, так что спасибо, но это мне мало пригодится.
Кен
В этом случае вы можете посмотреть на нее с помощью виртуальной машины с IE, реализовать метод ax или использовать canvas ... обратите внимание, что масштабирование в оттенках серого на больших изображениях с canvas может быть весьма затруднительным для движка Javascript.
Алекс
7
filter: grayприсутствует в Internet Explorer начиная с версии 4 . Они взяли много дерьма для своего продукта - правильно! - но они действительно опередили свое время с этим материалом
Пекка
2

Если вы хотите использовать Javascript, то вы можете использовать холст для преобразования изображения в оттенки серого. Поскольку Firefox и Safari поддерживают <canvas>, он должен работать.

Поэтому я погуглил «Оттенки серого», и первый результат был http://www.permadi.com/tutorial/jsCanvasGrayscale/index.html, который, кажется, работает.

Шалом Креймер
источник
2

поддержка встроенных CSS-фильтров в webkit была добавлена ​​в текущей версии 19.0.1084.46

так -webkit-filter: grayscale (1) будет работать, и это проще, чем SVG-подход для webkit ...

hjindal
источник
2

Вот миксин для LESS, который позволит вам выбрать любую непрозрачность. Заполните переменные самостоятельно для простого CSS с разными процентами.

Здесь намек на подсказку: в матрице используется тип насыщенности, поэтому вам не нужно делать ничего необычного, чтобы изменить процент.

.saturate(@value:0) {
    @percent: percentage(@value);

    filter: url("data:image/svg+xml;utf8,<svg%20xmlns='http://www.w3.org/2000/svg'><filter%20id='grayscale'><feColorMatrix%20type='saturate'%20values='@value'/></filter></svg>#grayscale"); /* Firefox 3.5+ */
    filter: grayscale(@percent); /* Current draft standard */
    -webkit-filter: grayscale(@percent); /* New WebKit */
    -moz-filter: grayscale(@percent);
    -ms-filter: grayscale(@percent);
    -o-filter: grayscale(@percent);
}

Тогда используйте это:

img.desaturate {
    transition: all 0.2s linear;
    .saturate(0);
    &:hover {
        .saturate(1);
    }
}
Джеймс ван Дайк
источник
2

Вам не нужно использовать столько префиксов для полного использования, потому что если вы выбираете префикс для старого Firefox, вам не нужно использовать префикс для нового Firefox.

Так что для полноценного использования достаточно использовать этот код:

img.grayscale {
    filter: url("data:image/svg+xml;utf8,<svg 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>#grayscale"); /* Firefox 10+, Firefox on Android */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
}

img.grayscale.disabled {
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
    filter: none;
    -webkit-filter: grayscale(0%);
}
Мату
источник
2

В дополнение к ответам других, можно обесцветить изображение на половине FF без головной боли матрицы SVG :

<feColorMatrix type="saturate" values="$v" />

Где $vмежду 0и 1. Это эквивалентно filter:grayscale(50%);.

Живой пример:

Ссылка на MDN

Bigood
источник
1

Основываясь на ответе Роберта :

Чтобы получить правильное преобразование из цветного изображения в изображение в градациях серого вместо использования матрицы следующим образом:

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

Вы должны использовать матрицу преобразования следующим образом:

0.299 0.299 0.299 0
0.587 0.587 0.587 0
0.112 0.112 0.112 0
0     0     0     1

Это должно хорошо работать для всех типов изображений на основе модели RGBA (красный-зеленый-синий-альфа).

Для получения дополнительной информации о том, почему вы должны использовать матрицу, я разместил более вероятно, что Роберт один проверяет следующие ссылки:

Кэджияма
источник
Я согласен, что 0.3333 не так; 0.2126 0.7152 0.0722 0 0Похоже, что это эквивалентно<fecolormatrix type="saturate" values="0">
Нейл
Ссылку «А здесь вы можете найти некоторые коды C # и VB» можно найти в интернет-архиве здесь: web.archive.org/web/20110220101001/http://www.bobpowell.net/…
thisgeek
Ссылка на «Яркость и цветоразностные сигналы» также не работает. Я не мог найти замену.
thisgeek
0

Одно ужасное, но выполнимое решение: визуализировать изображение с помощью объекта Flash, который затем дает вам все возможные преобразования во Flash.

Если ваши пользователи используют новейшие браузеры и если Firefox 3.5 и Safari 4 поддерживают его (я не знаю, что они делают / будут), вы можете настроить атрибут цветового профиля CSS изображения, установив для него значение ICC в оттенках серого. URL профиля. Но это много если!

richardtallent
источник
0

быть Альтернативой для старого браузера может быть использование маски производится с помощью псевдо-элементов или встроенных тегов.

Абсолютное позиционирование при наведении на img (или текстовую область, для которой не требуется ни щелчок, ни выделение) может близко имитировать эффекты цветовой шкалы с помощью rgba () или translucide png .

Это не даст одну цветовую гамму, но затеняет цвет вне диапазона.

тест на ручке с 10 разными цветами через псевдоэлемент, последний - серый. http://codepen.io/gcyrillus/pen/nqpDd (перезагрузить, чтобы переключиться на другое изображение)

G-Кирилл
источник
0

Попробуйте этот плагин jquery. Хотя это не просто решение HTML и CSS, но это ленивый способ достичь того, что вы хотите. Вы можете настроить оттенки серого в соответствии с вашими потребностями. Используйте его следующим образом:

$("#myImageID").tancolor();

Там есть интерактивная демоверсия . Вы можете поиграть с этим.

Ознакомьтесь с документацией по использованию, это довольно просто. документы

Николас TJ
источник
0

Для градаций серого в процентах в Firefox используйте вместо этого фильтр насыщения : (ищите «насыщать»)

filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='saturate'><feColorMatrix in='SourceGraphic' type='saturate' values='0.2' /></filter></svg>#saturate"
D-Val
источник
-1

Если вы или кто-то еще сталкиваетесь с подобной проблемой в будущем, открыты для PHP. (Я знаю, что вы сказали HTML / CSS, но, возможно, вы уже используете PHP в бэкэнде) Вот решение PHP:

Я получил его из библиотеки PHP GD и добавил переменную для автоматизации процесса ...

<?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);

?>
Trufa
источник
4
@Tom, исходя из голосов и фаворитов по исходному вопросу, ОП - не единственный человек, который задавался вопросом, возможно ли это. Конечно, этот ответ может нарушать правила, но я не вижу смысла в том, чтобы опускать ответ, который может быть полезен для многих людей.
Майкл Мартин-Смукер
1
@ Том, хотя, хотя это может быть и не точный ответ на вопрос, это может пригодиться, поскольку фактически «решает» проблему оттенков серого без «хлопот» из JavaScript, может быть, он даже не задумывался о PHP и не знал о нем Б-г, никакого вреда не предполагается. @ mlms13, в этом и был смысл, спасибо :)
Труфа
Это моя плохая "мысль" о том, что другие пользователи могут извлечь выгоду из этого поста, ускользнувшего из моего разума .. Извинения @Trufa.
Толчок
3
Это помогло мне поставить меня на правильный путь после нескольких других тупиков. Я обнаружил, что с помощью "imagefilter ($ source, IMG_FILTER_GRAYSCALE);" дал гораздо лучший результат, хотя. (Только PHP 5)
chrismacp
5
Отклонено, так как это практически не по теме. Оттенки серого изображения на стороне сервера полностью отличаются от CSS / HTML.
Саймон Стейнбергер