css - Sass/Compass-Convierta Hex, RGB o color con nombre a RGBA

compass-sass

Question

Puede ser Compass 101, pero ¿alguien ha escrito una mezcla que establezca el valor alfa de un color? Idealmente, me gustaría que Mixin tome cualquier forma de definición de color y aplique transparencia:

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

Answer 1

También hay ie-hex-str () para el formato IE ## AARRGGBB:

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=''#{ie-hex-str(#fdfdfd)}'', endColorstr=''#{ie-hex-str(#f6f6f6)}'',GradientType=0); /* IE6-9 */

Answer 2

Usa la función rgba integrada en Sass

Establece la opacidad de un color.

Ejemplos:

rgba (# 102030, 0.5) => rgba (16, 32, 48, 0.5)
rgba (azul, 0.2) => rgba (0, 0, 255, 0.2)

Parámetros:
Color (color)
(Número) alfa - Un número entre 0 y 1

Devoluciones:
(Color)

Código:

rgba(#ff0000, 0.5); // Output is rgba(255,0,0,0.5);

Answer 3

Yo uso el plugin rgbapng compass

rgbapng es un complemento de Compass para proporcionar soporte RGBA compatible con navegador cruzado *. Funciona mediante la creación de PNG transparentes alfabéticos de un solo píxel sobre la marcha para navegadores que no son compatibles con RGBA. Utiliza la biblioteca pura Ruby ChunkyPNG, lo que resulta en una instalación y despliegue sin problemas.

Instalar

gem install compass-rgbapng

Uso

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

Compila para:

background: url(''/images/rgbapng/000000bf.png?1282127952'');
background: rgba(0, 0, 0, 0.75);

Answer 4

from_hex(hex_string, alpha = nil);

De la documentation :

Crea un nuevo color a partir de una cadena hexadecimal CSS válida. El hash líder es opcional.