任何地方的颜色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中文网其他相关文章！