Как сделать инверсию цвета текста на изображении?

Question

[Roddrigo]

Добрый день. Есть сайт, там блок с изображением ткани и на нем текст. Цвет у ткани разный и светлый и темный и красный и т д.
Как сделать так, чтобы на светлом изображении текст был черный а на остальных становился белым?
Попытался поиграть с mix-blend-mode, но выходит не то. На светлом текст становится черным, а на остальных хрень получается.

Есть ли какие то способы ограничить цвет текста только черным и белым?

Comments

[Roddrigo]

Сделал проще. Добавил блоку вывод id и при совпадении id присваивать класс с инверсией.

const element = document.getElementById('Premier 1');
element.classList.add('inverted');

.inverted {
mix-blend-mode: difference;
}

[ProjectSoft]

Сделал проще. Добавил блоку...

Ещё проще:
Добавить пользовательское поле типа checkbox. Чекбокс чекнутый - класс .white В остальном текст цвета чёрный.

Почему проще.
Вам не нужно лезть в js для редактирования нужных id. Ибо этот подход абсолютно неправильный.

Answer 1

[Rsa97]

Сделайте чёрный текст с белой обводкой (-webkit-text-stroke) и он будет хорошо виден на любом фоне.

Comments

[Roddrigo]

Не подходит, там иконки да и выглядит ужасно эта обводка...