90 votes

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

186voto

maxbeatty Points 4066

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)

8voto

ilia choly Points 5816

J'utilise le rgbapng boussole plugin

rgbapng est une Boussole plugin pour fournir de la croix-navigateur compatible RGBA soutien. Il fonctionne en créant un seul pixel alpha-transparent Png à la volée pour les navigateurs qui ne supportent pas RGBA. Il utilise le pur Ruby ChunkyPNG bibliothèque résultant en des tracas de l'installation et de le déploiement.

Installer

gem install compass-rgbapng

L'utilisation de la

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

Compile:

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

2voto

mikespainhower Points 21

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 */
 

2voto

user776411 Points 26
 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.

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X