Черно-белая картинка

@qlipoth · Регистрация: 27.04.2013

Студворк — интернет-сервис помощи студентам

Здравствуйте подскажите пожалуйста как правильно прописать фильтр grayscale для фонового изображения блока IE?
вот так

CSS
1
 filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);

и вот так

CSS
1
-ms-filter: grayscale(100%);

не работает

@Опан · 10.03.2015, 11:47

CSS
1
2
3
4
5
<style>
.myclass{
    filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
}
</style>

HTML5
1
<img src=image.jpg class=myclass>

Или так:

HTML5
1
<img src=image.jpg style="filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)">

А второй вариант и у меня не работает.

@qlipoth · 10.03.2015, 19:55 **[ТС]**

мне этот вариант не подходит. картинку я использую как background-image

@Опан · 10.03.2015, 23:28

Похоже, что блоки этот фильтр не поддерживают. Я поменял <img> на <div>, в класс добавил background-image:url('image.jpg'); и ничего не вышло.

@qlipoth · 11.03.2015, 20:56 **[ТС]**

мне хотя бы какое решение, хоть на js. не хочу дубликаты изображений черно-белыми делать

@Опан · 12.03.2015, 02:07

Вот, что мне удалось накопать:

HTML5
1
2
3
4
5
6
7
8
<style>
.myclass{
    background-image:url("image.jpg");
    filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
    position:absolute;
}
</style>
<div class=myclass>Содержимое блока</div>

Так работает. А если убрать position:absolute; то тогда нет. Вот не пойму, при чём здесь позиционирование.

@qlipoth · 12.03.2015, 19:38 **[ТС]**

странно . у меня это код в осле картинку не обесцвечивает
http://jsfiddle.net/x94xvb0g/1/

@Опан · 12.03.2015, 22:03

Нужно из URL картинки убрать букву s. Т. е., не https://upload.wikimedia.org... , а http://upload.wikimedia.org... У меня шестая версия эксплорера, и там с этой буквой картинка не отображается вообще, а без неё - всё, как нужно, она есть и чернобелая.

@qlipoth · 12.03.2015, 22:11 **[ТС]**

вот

@Fedor92 · 12.03.2015, 22:15

А если так?

Кликните здесь для просмотра всего текста

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
.myclass{
    background-image:url("https://upload.wikimedia.org/wikipedia/commons/thumb/c/c8/Ailurus_fulgens_-  Diergaarde_Blijdorp-8a.jpg/220px-Ailurus_fulgens_-Diergaarde_Blijdorp-8a.jpg");
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
  filter: url(grayscale.svg#greyscale); /* Firefox 4+ */
  filter: gray; /* IE 6-9 */
  position:absolute;
  width:220px;
  height:330px;
}

@Опан · 12.03.2015, 22:15

Какой у Вас эксплорер? (версия) Я сейчас тоже такой поставлю.

@qlipoth · 12.03.2015, 22:20 **[ТС]**

11-й , я в разных режимах совместимости смотрю

Добавлено через 3 минуты
Fedor92, зачем прописывать filter: url(grayscale.svg#greyscale);? я ведь не создавал SVG-файл. впрочем я этот вариант тоже пробовал, к соажалению не работает

@Fedor92 · 12.03.2015, 22:20

http://caniuse.com/#search=filter - не парьтесь...

Сообщение от qlipoth

зачем прописывать filter: url(grayscale.svg#greyscale);?

- просто обрубок кода для ишаков выше 9-го...

@Опан · 12.03.2015, 22:32

Сообщение от Fedor92

А если так?
Код HTML5
.myclass{
* * background-image:url("https://upload.wikimedia.org/wikipedia/commons/thumb/c/c8/Ailurus_fulgens_- *Diergaarde_Blijdorp-8a.jpg/220px-Ailurus_fulgens_-Diergaarde_Blijdorp-8a.jpg");
* -webkit-filter: grayscale(100%);
* -moz-filter: grayscale(100%);
* -ms-filter: grayscale(100%);
* -o-filter: grayscale(100%);
* filter: grayscale(100%);
* filter: url(grayscale.svg#greyscale); /* Firefox 4+ */
* filter: gray; /* IE 6-9 */
* position:absolute;
* width:220px;
* height:330px;
}

Опять же, если убрать букву s, то работает.

@Fedor92 · 12.03.2015, 22:33

Сообщение от Опан

Опять же, если убрать букву s, то работает

Кто же спорит? Просто фильтры не один эксплорер не воспринимает в этом и косяк(линк выше)...

@qlipoth · 12.03.2015, 22:47 **[ТС]**

покажите пожалуйста скрин в IE. если работает у вас , значит я что-то не так делаю.

@Опан · 12.03.2015, 22:56

Вот:

@qlipoth · 12.03.2015, 23:02 **[ТС]**

волшебный у вас эксплорер какой-то

@Fedor92 · 12.03.2015, 23:02

Опан, у меня тоже прокатило даже с буквой s в адресе...

Добавлено через 50 секунд
Сейчас восьмёрку опробую...

@qlipoth · 12.03.2015, 23:03 **[ТС]**

выложите пожалуйста на jsfiddle рабочий вариант

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .
Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .	Влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .

@qlipoth 23 / 23 / 1 Регистрация: 27.04.2013 Сообщений: 385 Записей в блоге: 3
	10.03.2015, 19:55 [ТС]
	мне этот вариант не подходит. картинку я использую как background-image 0

@Опан Юзер с абсолютным слухом 709 / 489 / 195 Регистрация: 17.12.2010 Сообщений: 1,428
	10.03.2015, 23:28
	Похоже, что блоки этот фильтр не поддерживают. Я поменял <img> на <div>, в класс добавил background-image:url('image.jpg'); и ничего не вышло. 0

@qlipoth 23 / 23 / 1 Регистрация: 27.04.2013 Сообщений: 385 Записей в блоге: 3
	11.03.2015, 20:56 [ТС]
	мне хотя бы какое решение, хоть на js. не хочу дубликаты изображений черно-белыми делать 0

@qlipoth 23 / 23 / 1 Регистрация: 27.04.2013 Сообщений: 385 Записей в блоге: 3
	12.03.2015, 19:38 [ТС]
	странно . у меня это код в осле картинку не обесцвечивает http://jsfiddle.net/x94xvb0g/1/ 0

@Опан Юзер с абсолютным слухом 709 / 489 / 195 Регистрация: 17.12.2010 Сообщений: 1,428
	12.03.2015, 22:03
	Нужно из URL картинки убрать букву s. Т. е., не https://upload.wikimedia.org... , а http://upload.wikimedia.org... У меня шестая версия эксплорера, и там с этой буквой картинка не отображается вообще, а без неё - всё, как нужно, она есть и чернобелая. 0

@qlipoth 23 / 23 / 1 Регистрация: 27.04.2013 Сообщений: 385 Записей в блоге: 3
	12.03.2015, 22:11 [ТС]
	вот Миниатюры 0

@Опан Юзер с абсолютным слухом 709 / 489 / 195 Регистрация: 17.12.2010 Сообщений: 1,428
	12.03.2015, 22:15
	Какой у Вас эксплорер? (версия) Я сейчас тоже такой поставлю. 0

@qlipoth 23 / 23 / 1 Регистрация: 27.04.2013 Сообщений: 385 Записей в блоге: 3
	12.03.2015, 22:20 [ТС]
	11-й , я в разных режимах совместимости смотрю Добавлено через 3 минуты Fedor92, зачем прописывать filter: url(grayscale.svg#greyscale);? я ведь не создавал SVG-файл. впрочем я этот вариант тоже пробовал, к соажалению не работает 0

@qlipoth 23 / 23 / 1 Регистрация: 27.04.2013 Сообщений: 385 Записей в блоге: 3
	12.03.2015, 22:47 [ТС]
	покажите пожалуйста скрин в IE. если работает у вас , значит я что-то не так делаю. 0

@Опан Юзер с абсолютным слухом 709 / 489 / 195 Регистрация: 17.12.2010 Сообщений: 1,428
	12.03.2015, 22:56
	Вот: Миниатюры 0

@qlipoth 23 / 23 / 1 Регистрация: 27.04.2013 Сообщений: 385 Записей в блоге: 3
	12.03.2015, 23:02 [ТС]
	волшебный у вас эксплорер какой-то 0

@Fedor92 2964 / 2621 / 1068 Регистрация: 15.12.2012 Сообщений: 10,091 Записей в блоге: 11
	12.03.2015, 23:02
	Опан, у меня тоже прокатило даже с буквой s в адресе... Добавлено через 50 секунд Сейчас восьмёрку опробую... 0

@qlipoth 23 / 23 / 1 Регистрация: 27.04.2013 Сообщений: 385 Записей в блоге: 3
	12.03.2015, 23:03 [ТС]
	выложите пожалуйста на jsfiddle рабочий вариант 0