Sass / Compass - преобразование шестнадцатеричного, RGB или именованного цвета в RGBA

86

Это может быть Compass 101, но кто-нибудь написал миксин, который устанавливает альфа-значение цвета? В идеале я бы хотел, чтобы миксин имел любую форму определения цвета и применял прозрачность:

@include set-alpha( red, 0.5 );          //prints rgba(255, 0, 0, 0.5);
@include set-alpha( #ff0000, 0.5 );      //prints rgba(255, 0, 0, 0.5);
@include set-alpha( rgb(255,0,0), 0.5 ); //prints rgba(255, 0, 0, 0.5);
css sass compass-sass rgba Пэт Ньюэлл
источник

Ответы:

179

Используйте rgbaфункцию, встроенную в Sass

Устанавливает непрозрачность цвета.

Примеры:

rgba (# 102030, 0,5) => rgba (16, 32, 48, 0,5)
rgba (синий, 0,2) => rgba (0, 0, 255, 0,2)

Параметры:
(Цвет) цвет
(Число) альфа - Число от 0 до 1

Возврат:
(Цвет)

Код:

rgba(#ff0000, 0.5); // Output is rgba(255,0,0,0.5);
Максбитти
источник
4
не могу поверить, что я просто не пробовал это. Большое спасибо, Макс
Пэт Ньюэлл
@jon, не могли бы вы рассказать, что меня сбивает с толку, чтобы я мог его улучшить?
maxbeatty
@maxbeatty я не уверен, что случилось с моим комментарием, но я был сбит с толку "==>" ... задним числом это кажется очевидным, но когда вы чувствуете себя потерянным, действительно трудно отличить требуемый код от комментариев. Я думаю, это можно было бы сделать более понятным, включив только фактический используемый код в блоки кода.
Джон
@jon цитата прямо из документации Sass. Вместо того, чтобы просто ссылаться на соответствующую встроенную функцию. Я подумал, что было бы полезно включить в ответ соответствующую документацию. Извините, это сбивает с толку.
maxbeatty
о, черт возьми. Arrg. Всегда смотрите В КОРОБКУ, прежде чем пытаться думать за ее пределами. Блин!
dudewad
8

Я использую плагин rgbapng compass

rgbapng - это подключаемый модуль Compass для обеспечения кроссбраузерной * поддержки RGBA. Он работает путем создания однопиксельных альфа-прозрачных PNG-файлов на лету для браузеров, не поддерживающих RGBA. Он использует чистую библиотеку Ruby ChunkyPNG, что упрощает установку и развертывание.

Установить

gem install compass-rgbapng

Применение

@include rgba-background(rgba(0,0,0,0.75));

Компилируется в:

background: url('/images/rgbapng/000000bf.png?1282127952');
background: rgba(0, 0, 0, 0.75);
Илья Чоли
источник
эй ... круто. Я поражен силой компаса. спасибо за ответ
Пэт Ньюэлл
7

Функция rgba не работает с цветом без прозрачности, она снова возвращает шестнадцатеричное значение. В конце концов, это не означает преобразование шестнадцатеричного кода в rgba, мы просто получаем прибыль от шестнадцатеричного кода, не допускающего альфа (пока).

rgba(#fff, 1) // returns #fff

Итак, я сделал все маленькие функции, которые строят строку rgb. Мне пока не нужно заниматься прозрачностью.

@function toRGB ($color) {
    @return "rgb(" + red($color) + ", " + green($color) + ", " + blue($color)+ ")";
}
Карлос Мартинес
источник
2

Также есть ie-hex-str () для формата IE ## AARRGGBB:

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str(#fdfdfd)}', endColorstr='#{ie-hex-str(#f6f6f6)}',GradientType=0); /* IE6-9 */
майкспайнхауэр
источник
2 
from_hex(hex_string, alpha = nil);

Из документации :

Создайте новый цвет из действительной шестнадцатеричной строки CSS. Ведущий хеш не обязателен.

user776411
источник