Есть ли простой способ отобразить цветное растровое изображение в оттенках серого с помощью Just HTML/CSS
?
Он не должен быть IE-совместимым (и я думаю, что не будет) - если он работает в FF3 и / или Sf3, для меня этого достаточно.
Я знаю, что могу сделать это и с SVG
Canvas, но сейчас кажется, что это большая работа.
Есть ли действительно ленивый способ сделать это?
Ответы:
Поддержка CSS-фильтров появилась в Webkit. Итак, теперь у нас есть кросс-браузерное решение.
А как насчет Internet Explorer 10?
Вы можете использовать polyfill как серый .
источник
Исходя из ответа brillout.com , а также Романа требование «без SVG», вы можете обесцветить изображения в Firefox, используя только один файл SVG и немного CSS.
Ваш SVG-файл будет выглядеть так:
Сохраните его как resources.svg, теперь он может быть повторно использован для любого изображения, которое вы хотите изменить на оттенки серого.
В вашем CSS вы ссылаетесь на фильтр, используя специфическое
filter
свойство Firefox :Также добавьте проприетарные MS, если хотите, примените этот класс к любому изображению, которое вы хотите преобразовать в оттенки серого (работает в Firefox> 3.5, IE8) .
edit : вот хороший пост в блоге, который описывает использование нового
filter
свойства CSS3 в ответе SalmanPK в сочетании с подходом SVG, описанным здесь. Используя этот подход, вы получите что-то вроде:Дополнительная информация о поддержке браузера здесь .
источник
-webkit-filter: grayscale(100%);
затем это:-webkit-filter: grayscale(0);
чтобы удалить его.Для Firefox вам не нужно создавать файл filter.svg, вы можете использовать схему URI данных .
Принятие кода CSS первого ответа дает:
Позаботьтесь о том, чтобы заменить строку «utf-8» на кодировку вашего файла.
Этот метод должен быть быстрее, чем другой, потому что браузеру не нужно будет делать второй HTTP-запрос.
источник
Обновление: я сделал это в полном репозитории GitHub, включая полифилл JavaScript для IE10 и IE11: https://github.com/karlhorky/gray
Первоначально я использовал ответ SalmanPK , но затем создал вариант ниже, чтобы исключить дополнительный HTTP-запрос, необходимый для файла SVG. Встроенный SVG работает в версиях Firefox 10 и выше, а версии ниже 10 больше не занимают даже 1% мирового рынка браузеров.
С тех пор я постоянно обновляю решение в этом сообщении в блоге , добавляю поддержку постепенного перехода к цвету, поддержку IE 10/11 с SVG и частичную шкалу серого в демонстрационной версии.
источник
Если вы можете использовать JavaScript, то этот скрипт может быть тем, что вы ищете. Он работает кросс-браузер и пока работает нормально для меня. Вы не можете использовать его с изображениями, загруженными из другого домена.
http://james.padolsey.com/demos/grayscale/
источник
Просто сегодня такая же проблема. Я изначально использовал решение SalmanPK, но обнаружил, что эффект отличается между FF и другими браузерами. Это потому, что матрица преобразования работает только на яркость, а не на яркость, как фильтры в Chrome / IE. К моему удивлению, я обнаружил, что альтернативное и более простое решение в SVG также работает в FF4 + и дает лучшие результаты:
С помощью css:
Еще одно предостережение: IE10 больше не поддерживает «filter: grey» в режиме совместимости со стандартами, поэтому для работы требуется переключение режима совместимости в заголовках:
источник
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");
Простейший способ достижения оттенков серого исключительно с помощью CSS - через
filter
свойство.Свойство по-прежнему не поддерживается полностью и все еще требует его
-webkit-filter
для поддержки во всех браузерах.источник
Не похоже, что это возможно (пока), даже с CSS3 или проприетарным
-webkit-
или-moz-
CSS-свойствами.Тем не менее, я нашел этот пост в июне прошлого года, в котором использовались фильтры SVG для HTML. Не доступно ни в одном текущем браузере (демонстрация намекает на пользовательскую сборку WebKit), но очень впечатляет в качестве доказательства концепции.
источник
Для людей, которые спрашивают о игнорируемой поддержке IE10 + в других ответах, ознакомьтесь с этой частью CSS:
Применяется к этой разметке:
Для получения дополнительных демонстраций ознакомьтесь с разделом « Графика CSS3» в IE testdrive и этим старым блогом IE http://blogs.msdn.com/b/ie/archive/2011/10/14/svg-filter-effects-in-ie10.aspx.
источник
В 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 :-)
источник
Новый способ сделать это был доступен в течение некоторого времени в современных браузерах.
background-blend-mode позволяет получить некоторые интересные эффекты, одним из которых является преобразование в оттенках серого
Значение яркости , установленное на белом фоне, позволяет это сделать. (чтобы увидеть это серым цветом)
Яркость берется из изображения, цвет берется из фона. Поскольку он всегда белый, цвета нет.
Но это позволяет гораздо больше.
Вы можете анимировать эффект, установив 3 слоя. Первым будет изображение, а вторым будет бело-черный градиент. Если вы примените режим умножения наложения, вы получите белый результат, как и раньше, на белой части, но исходное изображение на черной части (умножение на белый дает белый, умножение на черный не действует).
На белой части градиента вы получите тот же эффект, что и раньше. В черной части градиента вы накладываете изображение на себя, и в результате получается неизмененное изображение.
Теперь все, что нужно, это переместить градиент, чтобы получить эффект динамического: (наведите курсор, чтобы увидеть его в цвете)
ссылка
матрица совместимости
источник
img
тег используется для изображения неbackground: url()
источник
Может быть, этот способ поможет вам
w3schools.org
источник
На самом деле это проще сделать с помощью IE, если я правильно помню, используя собственное свойство CSS. Попробуйте это
FILTER: Gray
с http://www.ssi-developer.net/css/visual-filters.shtmlМетод Ax делает изображение прозрачным, а за ним черный фон. Я уверен, что вы могли бы утверждать, что это в оттенках серого.
Хотя вы не хотели использовать Javascript, я думаю, вам придется использовать его. Вы также можете использовать язык на стороне сервера, чтобы сделать это.
источник
filter: gray
присутствует в Internet Explorer начиная с версии 4 . Они взяли много дерьма для своего продукта - правильно! - но они действительно опередили свое время с этим материаломЕсли вы хотите использовать Javascript, то вы можете использовать холст для преобразования изображения в оттенки серого. Поскольку Firefox и Safari поддерживают
<canvas>
, он должен работать.Поэтому я погуглил «Оттенки серого», и первый результат был http://www.permadi.com/tutorial/jsCanvasGrayscale/index.html, который, кажется, работает.
источник
поддержка встроенных CSS-фильтров в webkit была добавлена в текущей версии 19.0.1084.46
так -webkit-filter: grayscale (1) будет работать, и это проще, чем SVG-подход для webkit ...
источник
Вот миксин для LESS, который позволит вам выбрать любую непрозрачность. Заполните переменные самостоятельно для простого CSS с разными процентами.
Здесь намек на подсказку: в матрице используется тип насыщенности, поэтому вам не нужно делать ничего необычного, чтобы изменить процент.
Тогда используйте это:
источник
Вам не нужно использовать столько префиксов для полного использования, потому что если вы выбираете префикс для старого Firefox, вам не нужно использовать префикс для нового Firefox.
Так что для полноценного использования достаточно использовать этот код:
источник
В дополнение к ответам других, можно обесцветить изображение на половине FF без головной боли матрицы SVG :
Где
$v
между0
и1
. Это эквивалентноfilter:grayscale(50%);
.Живой пример:
Показать фрагмент кода
Ссылка на MDN
источник
Основываясь на ответе Роберта :
Чтобы получить правильное преобразование из цветного изображения в изображение в градациях серого вместо использования матрицы следующим образом:
Вы должны использовать матрицу преобразования следующим образом:
Это должно хорошо работать для всех типов изображений на основе модели RGBA (красный-зеленый-синий-альфа).
Для получения дополнительной информации о том, почему вы должны использовать матрицу, я разместил более вероятно, что Роберт один проверяет следующие ссылки:
источник
0.2126 0.7152 0.0722 0 0
Похоже, что это эквивалентно<fecolormatrix type="saturate" values="0">
Одно ужасное, но выполнимое решение: визуализировать изображение с помощью объекта Flash, который затем дает вам все возможные преобразования во Flash.
Если ваши пользователи используют новейшие браузеры и если Firefox 3.5 и Safari 4 поддерживают его (я не знаю, что они делают / будут), вы можете настроить атрибут цветового профиля CSS изображения, установив для него значение ICC в оттенках серого. URL профиля. Но это много если!
источник
быть Альтернативой для старого браузера может быть использование маски производится с помощью псевдо-элементов или встроенных тегов.
Абсолютное позиционирование при наведении на img (или текстовую область, для которой не требуется ни щелчок, ни выделение) может близко имитировать эффекты цветовой шкалы с помощью rgba () или translucide png .
Это не даст одну цветовую гамму, но затеняет цвет вне диапазона.
тест на ручке с 10 разными цветами через псевдоэлемент, последний - серый. http://codepen.io/gcyrillus/pen/nqpDd (перезагрузить, чтобы переключиться на другое изображение)
источник
Вы можете использовать одну из функций jFunc - использовать функцию "jFunc_CanvasFilterGrayscale" http://jfunc.com/jFunc-functions.aspx
источник
Попробуйте этот плагин jquery. Хотя это не просто решение HTML и CSS, но это ленивый способ достичь того, что вы хотите. Вы можете настроить оттенки серого в соответствии с вашими потребностями. Используйте его следующим образом:
Там есть интерактивная демоверсия . Вы можете поиграть с этим.
Ознакомьтесь с документацией по использованию, это довольно просто. документы
источник
Для градаций серого в процентах в Firefox используйте вместо этого фильтр насыщения : (ищите «насыщать»)
источник
Если вы или кто-то еще сталкиваетесь с подобной проблемой в будущем, открыты для PHP. (Я знаю, что вы сказали HTML / CSS, но, возможно, вы уже используете PHP в бэкэнде) Вот решение PHP:
Я получил его из библиотеки PHP GD и добавил переменную для автоматизации процесса ...
источник