2012-02-14 5 views
67

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

@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); 

ответ

153

Используйте rgba function built into 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); 
+3

Не могу поверить, что я не просто попробовал это. Большое спасибо max –

+0

@jon вы можете подробно рассказать о том, что сбивало с толку о моем ответе, чтобы я мог его улучшить? – maxbeatty

+0

@maxbeatty Я не уверен, что случилось с моим комментарием, но меня смутило «==>» ... это кажется очевидным в ретроспективе, но когда вы чувствуете себя потерянным, действительно сложно сказать требуемый код из комментариев. я предполагаю, что это можно сделать более понятным, включив только фактический полезный код в кодовые блоки. – jon

8

Я использую rgbapng compass plugin

rgbapng плагин Компас для обеспечения кросс-браузер * совместимая поддержка 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); 
+0

whoa ... удивительный. Я взорван силой компаса. Спасибо за ответ –

3

Там также есть-гекс-ул() для формата в 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); 

От documentation:

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