Можно ли изменить цвет текста в зависимости от цвета фона с помощью CSS?

Ответ 1

Вот мое решение (думая об этом по-другому):

Используйте DIV с overflow: hidden; для "бара" военно-морского флота, который показывает шкалу оценки. Затем выписываете два набора TEXT:

• Внутри панели DIV (переполнение: скрыто;) она будет белой (сверху)
• В базовом контейнере DIV он будет черным. (Контейнер)

Результатом будет перекрытие двух цветных текстовых div:

 ________________________________
|          1          |    2     |
|_(dark blue w white)_|__________|

Вот мой jsFiddle

Он отлично работает, потому что он будет "прорезать" буквы, если полоса находится на этой ширине. Проверьте это, я думаю, что это то, что вы ищете.

Ответ 2

Нет, вы не можете сделать это только с помощью CSS. Для этого вам нужен JavaScript.

С jQuery/JavaScript вы можете проверить, применяется ли к элементу правило CSS, а затем делать то, что вы хотите, т.е.

if ( $('#element').css('white-space') == 'nowrap' ) {
     // do something
} else {
     // do something else
}

Также читайте здесь: JQuery: как проверить, имеет ли элемент определенный класс/стиль css

Ответ 3

Да, это возможно.

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

И вы можете использовать jQuery('body').css('color', '#fff'), например, чтобы изменить цвет основного текста на белый.

Если вы предоставили некоторый пример кода, было бы возможно создать более конкретный ответ для вашего вопроса.

Ответ 4

Действительно, вам нужно использовать JavaScript. Я бы подошел к проблеме, выполнив что-то вроде этого:

1. Рассчитайте ширину перекрытия в пикселях. то есть width = ${"#container"}.width() - ${"#progressbar"}.width();

2. Подсчитайте объем текста, который вы должны выделить, вы можете использовать следовать этому обсуждению. Я бы начал с пустой строки, проверил бы ее ширину и, если она меньше, чем ширина, вычисленная выше, добавьте один символ и повторите. Как только оно станет выше, выберите эту строку

3. Вставьте указанную выше строку между интервалами, например, так: ${"#container"}.html("<span class='highlight'>"+highlitedText+"</span>"+restOfTheText); Очевидно, что litlitText - это строка, содержащая символы в 2., а restOfTheText - это строка с остальными символами.

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

Ответ 5

Хотя принятое решение, вероятно, проще всего для этого точного случая, я написал более подробный плагин jQuery, который делает именно то, что вам нужно (и немного больше).

Репо: https://github.com/salsita/jq-clipthru
Блог: https://blog.javascripting.com/2014/06/11/changing-text-color-based-on-background-color/

Вкратце, он динамически создает клоны элемента с разными классами CSS и скрепляет их видимый контент, используя необработанный CSS-клип, чтобы соответствовать перекрытию. Если вы используете его, обратите внимание, что CSS-клип работает только с элементами position: absolute или position: fixed, поэтому вам придется размещать текст таким образом (что не должно быть проблемой в вашем случае, как я вижу).