Ändern Sie die Alpha-Deckkraft der Variablen WENIGER

171

Mit WENIGER weiß ich, dass ich die Sättigung oder den Farbton einer Farbvariablen ändern kann. Das sieht so aus:

background: lighten(@blue, 20%);

Ich möchte jedoch die Alpha-Deckkraft meiner Farbe ändern. Am liebsten so:

background: alpha(@blue, 20%);

Gibt es eine einfache Möglichkeit, dies in WENIGER zu tun?

css variables less opacity alpha ben
quelle

Antworten:

303

Die Site-Dokumentation gibt die Antwort:

background: fade(@blue, 20%);

Der Funktionsname entspricht fadenicht alphadiesem Dokument.

ScottS
quelle

Vielen Dank! Ich habe es satt, alles auf RGBA umzustellen!

BillyNair

Ich suchte nach dem Verdunkeln und Aufhellen. Docs haben mich dorthin gebracht. Danke

Ich bin damit einverstanden, dass 'Fade' mir nicht genau erscheint. Sass macht es richtig: alpha (), opacity () und rgba ().

Rich Finelli

Für die Aufzeichnung fade()funktioniert nicht mit CSS vars - dhfade(var(--mycolor), 20%)

ed1nh0

Zur Vollständigkeit

verblassen

Stellen Sie die absolute Transparenz einer Farbe ein. Kann auf Farben angewendet werden, unabhängig davon, ob sie bereits einen Deckkraftwert haben oder nicht.

background: fade(@blue, 20%);

einblenden

Verringern Sie die Transparenz (oder erhöhen Sie die Deckkraft) einer Farbe, um sie undurchsichtiger zu machen.

background: fadein(@blue, 80%);

ausblenden

Erhöhen Sie die Transparenz (oder verringern Sie die Deckkraft) einer Farbe, wodurch sie weniger undurchsichtig wird. Um in die andere Richtung zu verblassen, verwenden Sie Fadein.

background: fadeout(@blue, 20%);

Vollständige Dokumentation anzeigen

Adrian Enriquez
quelle

Fadeout ist genau das, wonach ich gesucht habe, danke!

maxime1992