web-dev-qa-db-fra.com

Sass/Compass - Convertir une couleur hexadécimale, RVB ou nommée en RGBA

Cela peut être Compass 101, mais quelqu'un a-t-il écrit un mix qui définit la valeur alpha d'une couleur? Idéalement, j'aimerais que le mixin prenne n'importe quelle forme de définition de couleur et applique la transparence:

@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);
csssasscompass-sassrgba
71
Pat Newell

Utilisez la fonction rgba intégrée à Sass

Définit l'opacité d'une couleur.

Exemples:

rgba (# 102030, 0.5) => rgba (16, 32, 48, 0.5)
rgba (bleu, 0,2) => rgba (0, 0, 255, 0,2) 

Paramètres:
Couleur (couleur)
(Nombre) alpha - Un nombre entre 0 et 1 

Résultats:
(Couleur)

Code:

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

J'utilise le plugin rgbapng compass

rgbapng est un plugin Compass pour fournir un navigateur compatible * Soutien RGBA. Il fonctionne en créant des fichiers PNG alpha-transparents à pixel unique à la volée pour les navigateurs qui ne supportent pas RGBA. Il utilise le pur Ruby Bibliothèque ChunkyPNG résultant en une installation sans problème et déploiement.

Installer

gem install compass-rgbapng

Usage

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

Compile à:

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

Il y a aussi ie-hex-str () pour le format ## AARRGGBB d'IE:

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

De la documentation :

Créez une nouvelle couleur à partir d'une chaîne hexadécimale CSS valide. Le hash principal est optionnel.

2
user776411

La fonction rgba ne fonctionne pas sur les couleurs sans transparence, elle renvoie à nouveau un hexagone. Après tout, il n'est pas fait pour transformer hex en rgba, nous ne faisons que tirer profit de l'hex ne permet pas (encore) d'alpha.

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

J'ai donc créé toutes les petites fonctions qui construisent la chaîne rgb. Je n'ai pas besoin de traiter les transparents pour l'instant.

@function toRGB ($color) {
    @return "rgb(" + red($color) + ", " + green($color) + ", " + blue($color)+ ")";
}
0
Carlos Martínez