Как изменить цвет текста на изображении на противоположный?

Question

Велор

css , javascript

Как изменить цвет текста на изображении на противоположный?

Как можно настроить стиль текста чтобы он был читаемым, при этом имеется блок с изображением ткани разных цветов (светлых, темных, красных и др.)? Пытался использовать mix-blend-mode, но не получилось правильно настроить его так, чтобы на светлых изображениях текст был черным, а на остальных - белым. Существует ли другие методы, чтобы ограничить цвет текста только черным и белым?

5 июля 2024 г. 5:02

Ответы на вопрос 2

Похожие вопросы

Answer 1

Для изменения цвета текста на изображии на противоположный, можно использовать CSS фильтр invert:

```css
.inverted-text {
    filter: invert(100%);
}
```

Чтобы настроить стиль текста так, чтобы он был читаемым на изображениях разных цветов, можно использовать такой подход: создать дополнительный эффект текста, который будет менять цвет в зависимости от цвета фона. Например, можно использовать свойство mix-blend-mode и комбинировать его с псевдоэлементом ::before или ::after:

```css
.text {
    color: black;
    mix-blend-mode: difference;
}
.text::before {
    content: attr(data-text);
    color: white;
    mix-blend-mode: difference;
}
```

Здесь текст будет черным по умолчанию, но на светлых фонах он будет менять цвет на белый.

Если вы хотите ограничить цвет текста только черным и белым, можно использовать комбинацию свойств filter и mix-blend-mode:

```css
.text {
    color: black;
}
.dark-background .text {
    color: white;
    filter: invert(100%);
    mix-blend-mode: exclusion;
}
```

В данном случае, текст будет черным на светлых фонах и белым на темных фонах, при этом цвет текста будет ограничен только черным и белым.

Answer 2

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