MOINS CSS préprocesseur: Y at-il un moyen de tracer une seule couleur à une définition rgb et rgba?

StackOverflow https://stackoverflow.com/questions/4445238

  •  10-10-2019
  •  | 
  •  

Question

Je suis en train d'écrire un bloc dans le CSS préprocesseur MOINS qui procédez comme suit:

@transparent_background(@color; @alpha: .8)
{
  background: @color;
  background: rgba(<color R value>, <color G value>, <color B value>, @alpha);
}

Est-il possible d'obtenir les valeurs RVB de @color si elle est une définition standard hexagonale (à savoir #rrggbb)? Est-il possible de le faire si @color est défini d'une autre manière?

EDIT: SOLUTION

@transparent_background(@color; @alpha: .8)
{
  background: @color;
  background: @color + rgba(0, 0, 0, @alpha);
}
Était-ce utile?

La solution

Aucune des solutions ne fonctionne plus, mais celui-ci fait (grâce à @Elyse ):

.alpha(@color, @alpha: 0.8) {
    color: @color;
    color: hsla(hue(@color), saturation(@color), lightness(@color), @alpha);
}

La fonction hsla(), sans publicité sur le site MOINS, est définie dans le code source .

Autres conseils

Essayez ceci:

background: @color - rgba(0, 0, 0, 1.0) + rgba(0, 0, 0, @alpha);

La soustraction effacera le canal alpha sur @color vous suffit d'ajouter le @alpha désiré au canal alpha. Les couleurs ont la gamme complète des opérateurs et ils travaillent composante par composante lors du fonctionnement sur deux couleurs; les couleurs sont stockées sous forme de composants RGBA en interne ce qui devrait fonctionner. En outre, le canal alpha est normalisée pour être dans l'intervalle [0, 1.0] de sorte à soustraire 1,0 de la couche alpha doit effacer sans causer de problèmes.

Je n'ai pas CSS MOINS mis en place en ce moment, donc je ne peux pas vérifier, mais cela vaut la peine un coup de feu.

Notez que vous pouvez également procéder à l'fadein / fadeout fonctions MOINS:

.alpha(@color, @alpha: 80)
{
    background-color: fadeout(@color, (100 - @alpha));
}

Ainsi, .alpha (rouge, 25) se traduira par une couleur de fond de rgba (255, 0, 0, 0,25)

Je sais que c'est une vieille question, mais si tout ce que vous cherchez à faire est d'ajouter une valeur alpha il suffit d'utiliser fade(@color, @alpha). La couleur peut être dans l'hexagone, rgba ou HSLA.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top