Цветовая арифметика в CSS - PullRequest
Новая
       40

Цветовая арифметика в CSS

0 голосов
/ 12 июня 2018

Можем ли мы установить вычисленный результат как цвет фона в CSS. 

background-color: var(--backColor) + #101010;

здесь --backColor - это переменная CSS.

1 Ответ

0 голосов
/ 12 июня 2018

Без использования прекомпилятора или решения JavaScript / jQuery вы будете действительно ограничены.

Насколько я исследовал, я не думаю, что это будет возможно со значениями HEX, если только вы не найдете способ разделить шестнадцатеричное значение на 3 различных значения и затем преобразовать их в их десятичное относительное значение.

Однако, это решение не для hex, но для тех, кто ищет решение rgb / rgba, вы можете разделить значение на их собственные соответствующие переменные, а затем использовать calc() для добавления / вычитания / умножения в соответствии с решением,

Если вы прочитаете спецификации здесь , вы увидите, что браузер обрабатывает мин / макс для вас, когда значение превышает 255 или ниже 0, что позволяет легко вставлять ошибочные значения, не беспокоясь ологика.

Значения за пределами гаммы устройства должны быть обрезаны или отображены в гамме, когда гамма известна: значения красного, зеленого и синего необходимо изменить, чтобы они попадали в диапазон, поддерживаемый устройством..

Теперь я не могу сказать, что это кросс-браузерная совместимость, но тестирование в последних версиях Chrome, Edge дает качественные результаты.Тем не менее, в Chrome, похоже, не было верхнего / нижнего предела отсечения, с ограниченным тестированием, которое я проводил, однако у Edge есть верхний предел добавления 214748 к числу.Так что со всем, что касается совместимости, убедитесь, что вы тестируете для своих нужд.

Вот пример, обратите внимание, что вам не нужно использовать целые числа, вы можете использовать проценты или любую подходящую комбинацию чисел, например, комбинирование hsl. 

:root {
  --r : 0;
  --g : 0;
  --b : 0;
}
#div {
  /* value should be aqua:  0, 255, 255 */
  background: rgb(calc(var(--r) * 255), calc(var(--g) + 1 * 255), calc(var(--b) + 255));
}
#div2 {
  /* value should be red: 255, 0, 0 */
  background: rgb(calc(var(--r) + 500), calc(var(--g) * 500), calc(var(--b) - 500));
}
<div id="div">
  Div
</div>
<div id="div2">
  Div 2 With Min/Max clipping
</div>
...