Warna alpha di mana sahaja

Dalam artikel terdahulu, "Derajat Penggunaan Harta Tersuai yang berbeza," saya membincangkan satu senario yang melibatkan warna dan sifat adat CSS di mana saya berlebihan pemisahan nilai warna HSL. Sepenuhnya memisahkan setiap warna ke dalam komponen H, S, dan L mungkin berlebihan.

Walau bagaimanapun, pendekatan yang lebih praktikal melibatkan pemisahan ini:

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

Ini menggunakan dua sifat tersuai setiap warna. Kenapa? Kerana ini menyediakan kaedah mudah untuk aplikasi warna dan membolehkan pelarasan ketelusan alfa yang mudah.

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

Tidak ada cara yang mudah dalam CSS standard untuk menambah alfa ke warna yang sedia ada. Walaupun, ciri CSS masa depan menawarkan penyelesaian yang berpotensi:

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

Ini elegan, tetapi kesediaan pengeluarannya tetap tidak menentu.

Begitu juga, kerja -kerja cat Houdini, sambil menjanjikan (kerja Dave Rupert amat perlu diberi perhatian!), Kurang sokongan penyemak imbas yang luas (tiada sokongan Firefox atau safari lagi). Mereka menawarkan penyelesaian yang menarik dengan menggunakan API kanvas untuk menghasilkan imej dengan alpha, dengan berkesan membolehkan ketelusan alfa untuk sebarang format warna. Ini berfungsi di Chrome. Kod dan demonstrasi video boleh didapati di Dave's GitHub dan Blog.

Untuk penyelesaian siap pengeluaran yang memerlukan fungsi ini, kaedah sifat tersuai awal adalah pendekatan yang paling boleh dipercayai.

Atas ialah kandungan terperinci Warna alpha di mana sahaja. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!