Темный/светлый цвет текста в зависимости от фонового содержимого ⇐ CSS

[Anonymous]

У меня есть блок с несколькими интервалами разного смещения и длины, и я хочу, чтобы наложенный текст менял цвет в зависимости от того, светлый или темный фон.

Вот небольшой пример:

Код: Выделить всё

#content {
position: relative;
display: flex;
align-items: center;
border: 2px solid black;
padding: 8px 16px;
box-sizing: border-box;
font-size: 24px;
font-weight: bold;
font-family: Verdana, Geneva, Tahoma, sans-serif;
width: 400px;

.interval {
position: absolute;
top: 0;
height: 100%;
}

#name {
z-index: 1;
}
}

Код: Выделить всё

John Johnson

Поэтому в этом случае текст должен быть черно-черно-белым, чтобы пользователь мог его прочитать.

Как мне решить эту проблему.

Подробнее здесь: https://stackoverflow.com/questions/798 ... nd-content