Меньше препроцессора CSS: есть ли способ отобразить один цвет с определением RGB и RGBA?

StackOverflow https://stackoverflow.com/questions/4445238

  •  10-10-2019
  •  | 
  •  

Вопрос

Я пытаюсь написать блок в препроцессоре CSS меньше, который сделает следующее:

@transparent_background(@color; @alpha: .8)
{
  background: @color;
  background: rgba(<color R value>, <color G value>, <color B value>, @alpha);
}

Есть ли способ вытащить значения RGB из @Color, если это стандартное определение шестнадцатеристи (т.е. #RRGGBB)? Есть ли способ сделать это, если @color определяется другим способом?

РЕДАКТИРОВАТЬ: Решение

@transparent_background(@color; @alpha: .8)
{
  background: @color;
  background: @color + rgba(0, 0, 0, @alpha);
}
Это было полезно?

Решение

Ни одно из решений больше не работает, но это делает (благодаря @Elyse):

.alpha(@color, @alpha: 0.8) {
    color: @color;
    color: hsla(hue(@color), saturation(@color), lightness(@color), @alpha);
}

А hsla() Функция, хотя и не рекламируется на веб -сайте, определяется в исходном коде.

Другие советы

Попробуй это:

background: @color - rgba(0, 0, 0, 1.0) + rgba(0, 0, 0, @alpha);

Вычитание очистит альфа -канал на @color Тогда вы просто добавляете желаемый @alpha к альфа -каналу. Цветы имеют полный набор операторов, и они работают компонентом по компоненту при работе на двух цветах; Цвета хранятся как компоненты RGBA внутри, так что это должно работать. Кроме того, альфа -канал нормализован, чтобы быть в интервале [0, 1.0] Таким образом, вычитание 1.0 из альфа -канала должно очистить его, не вызывая никаких проблем.

У меня сейчас нет CSS, поэтому я не могу проверить, но это стоит попробовать.

Обратите внимание, что вы также можете продолжить функции Fadein/Fadeout меньше:

.alpha(@color, @alpha: 80)
{
    background-color: fadeout(@color, (100 - @alpha));
}

Таким образом, .alpha (красный, 25) приведет к фоновому цвету RGBA (255, 0, 0, 0,25)

Я знаю, что это старый вопрос, но если все, что вы хотите сделать, это добавить альфа -значение. fade(@color, @alpha). Анкет Цвет может быть в HEX, RGBA или HSLA.

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top