Потому что background по определению находится ниже основного контента этого же элемента.
Нужно либо делать несколько вложенных элементов, либо равноправных с абс позиционированием, либо множественный фон...
Ну то есть выход из положения скорее всего есть, но он будет не таким, как спрашивается в вопросе.
Точнее, я нашёл как это сделать: learn.javascript.ru/event-delegation
...но там описан как-той адский костыль с ручным ползаньем по DOM-дереву туда-обратно. Я думал, есть какой-то более красивый способ. Боюсь, что это будет тормозить при сложной странице на много тыщ узлов.
Китана: С rgba "нет" такой проблемы потому, что она используется как исходник в ваших расчетах. Но если взять за основу некий цвет в hsla (а равно как и в hsv/hsb, hwb, hsi, yuv, yqi, lab и чем угодно) и перевести туда-сюда - она опять появится.
В целом проблема надумана. Погрешность в 1 единицу в вебе никто никогда не заметит.
А малопопулярна модель hsl потому, что аудитория была поделена ещё до её вывода на рынок. Программистам удобнее rgb, у всех дизайнеров в голове прочно сидит hsb (поскольку используется во всех продуктах Adobe). Перепривыкать никто не хочет.
А, то есть float - это просто слепленные вместе 4 обычных канала по 1 байту? Я было подумал, что он умеет каждую компоненту RGBA делать вещественным числом.
Нужно либо делать несколько вложенных элементов, либо равноправных с абс позиционированием, либо множественный фон...
Ну то есть выход из положения скорее всего есть, но он будет не таким, как спрашивается в вопросе.