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

Puede ser Compass 101, pero ¿alguien ha escrito una mezcla que establece el valor alfa de un color? Idealmente, me gustaría que el mixin para tomar cualquier tipo de definición de color y aplicar la transparencia:Sass/Compass - Convierta Hex, RGB o color con nombre a 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);

Fuente

2012-02-14 Pat Newell

153

Utilice la rgba function built into 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

Devuelve:
(color)

Código:

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

Fuente

2012-02-14 18:51:53 maxbeatty

No puedo creer que no haya intentado eso. Muchas gracias Max –

@jon ¿Pueden explicarme qué fue lo que confundió mi respuesta para poder mejorarla? – maxbeatty

@maxbeatty No estoy seguro de lo que sucedió con mi comentario, pero me confundí con "==>" ... parece obvio en retrospectiva, pero cuando te sientes perdido es muy difícil distinguir el código requerido de los comentarios. Supongo que podría hacerse más claro al incluir solo el código real utilizable en los bloques de código. – jon

uso el rgbapng rgbapng compass plugin

es un plug-in brújula para proporcionar multi-navegador compatible * apoyo RGBA. Funciona mediante la creación de PNG transparentes alfabéticos de un solo píxel sobre la marcha para los navegadores que no son compatibles con RGBA. Utiliza la biblioteca pura ChykyPNG Ruby , lo que da como resultado una instalación sin problemas y la implementación de .

Instalar

gem install compass-rgbapng

Uso

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

se compila a:

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

Fuente

2012-02-14 18:58:53

whoa ... increíble. Estoy impresionado por el poder de la brújula. Gracias por la respuesta –

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

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

Fuente

2013-06-20 03:59:25 mikespainhower

from_hex(hex_string, alpha = nil);

Desde el documentation:

Crear un nuevo color en una cadena hexadecimal válido CSS. El hash líder es opcional.

Fuente

2014-07-15 14:00:24 user776411

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

Respuesta

Cuestiones relacionadas