Farbe Alpha überall

In einem früheren Artikel "Unterschiedliche Grad der benutzerdefinierten Eigenschaftsnutzung" habe ich ein Szenario mit Farben und CSS -benutzerdefinierten Eigenschaften besprochen, in denen ich die Trennung von HSL -Farbwerten überschritten habe. Die vollständige Aufteilung jeder Farbe in seine H-, S- und L -Komponenten kann übermäßig sein.

Ein praktischerer Ansatz beinhaltet jedoch diese Trennung:

 <code>html { --color-1-hsl: 200deg 15% 73%; --color-1: hsl(var(--color-1-hsl)); }</code>

Dies verwendet zwei benutzerdefinierte Eigenschaften pro Farbe. Warum? Da dies eine einfache Methode für die Farbanwendung bietet und einfache Alpha -Transparenzanpassungen ermöglicht.

 <code>.card { background: var(--color-1); } .card-with-alpha { background: hsl(var(--color-1-hsl) / 0.5); }</code>

Es gibt keinen einfachen Weg in Standard -CSS, um Alpha zu einer vorhandenen Farbe hinzuzufügen. Eine zukünftige CSS -Funktion bietet jedoch eine potenzielle Lösung:

 <code>/* Future CSS! (currently works in Safari Technology Preview) */ .card-with-alpha { background: hsl(from var(--color-1) hsl / 0.5); }</code>

Dies ist elegant, aber seine Produktionsbereitschaft bleibt ungewiss.

In ähnlicher Weise haben Houdini -Farben, während sie verspricht (Dave Ruperts Arbeit ist besonders bemerkenswert!). Sie bieten eine überzeugende Lösung, indem sie Canvas -APIs verwenden, um Bilder mit Alpha zu erzeugen, wodurch die Alpha -Transparenz für jedes Farbformat effektiv ermöglicht wird. Dies funktioniert in Chrome. Der Code und eine Videodemonstration finden Sie in Dave's Github und Blog.

Für produktionsbereite Lösungen, die diese Funktionalität erfordern, ist die anfängliche Methode für benutzerdefinierte Eigenschaften der zuverlässigste Ansatz.

Das obige ist der detaillierte Inhalt vonFarbe Alpha überall. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!