任何地方的顏色alpha

在上一篇文章“不同程度的自定義屬性用法”中，我討論了涉及顏色和CSS自定義屬性的場景，在該場景中，我過度越過了HSL顏色值的分離。將每種顏色完全分成其H，S和L組件可能過多。

但是，一種更實用的方法涉及這種分離：

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

這每種顏色使用兩個自定義屬性。為什麼？因為這為顏色應用提供了一種簡單的方法，並允許輕鬆的Alpha透明度調整。

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

標準CSS中沒有直接的方式將alpha添加到現有顏色中。雖然，未來的CSS功能提供了潛在的解決方案：

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

這很優雅，但其生產準備仍然不確定。

同樣，Houdini Paint Worklets雖然有前途（Dave Rupert的作品特別值得注意！），但缺乏廣泛的瀏覽器支持（目前尚無Firefox或Safari支持）。他們通過使用Canvas API來生成具有Alpha的圖像，從而有效地為任何顏色格式實現了Alpha透明度，從而提供了引人注目的解決方案。這在Chrome中起作用。代碼和視頻演示可在Dave的Github和博客上找到。

對於需要此功能的生產就緒解決方案，初始自定義屬性方法是最可靠的方法。

以上是任何地方的顏色alpha的詳細內容。更多資訊請關注PHP中文網其他相關文章！