用hsla()设置蓝色透明色：hsla(240, 100%, 50%, 0.7)中240为蓝色相位，100%饱和度，50%亮度，0.7为透明度（0–1小数），不可用百分比；仅作用于颜色本身，不影响子元素，调色比rgba更直观。
HTML里用HSL设置蓝色透明色，核心就一条：加alpha参数
纯HSL（如hsl(240, 100%, 50%)）不支持透明；必须用hsla()函数，第四个参数才是透明度。浏览器支持从IE9+开始，现代项目可放心用。
hsla()的四个参数怎么填才得到“蓝色+透明”
前三个参数决定蓝的色调、饱和度和亮度，第四个是alpha（0–1之间的小数），不是百分比。常见误区是写成hsla(240, 100%, 50%, 30%)——这会失效，因为30被当成了非法值（超出0–1范围）。
-
h：蓝色在色相环上约是240（范围0–360） -
s：想鲜艳就用100%，偏灰蓝可降到60%或更低 -
l：50%是标准明暗平衡；30%偏暗蓝，80%偏浅蓝 -
a：想要半透写0.5，几乎看不见写0.1，完全不透明就别用hsla，直接用hsl
实际 CSS 中怎么写才不出错
直接替换color、background-color、border-color等属性的值即可，不需要额外声明opacity——后者会影响整个元素及其子内容，而hsla只作用于颜色本身。
button {
background-color: hsla(240, 100%, 50%, 0.7); /* 鲜蓝半透 */
color: hsla(240, 80%, 20%, 0.9); /* 深蓝文字略透 */
}注意：如果背景是白色，hsla(240, 100%, 50%, 0.1)看起来几乎就是白底；要看到明显蓝色，alpha建议不低于0.3。
立即学习“前端免费学习笔记（深入）”；
和rgba()比，hsla()蓝有什么优势
调色直觉更强。比如想把当前蓝变浅一点，只改l（比如从50%→70%），不用像rgba那样去算R/G/B分量。但要注意：HSL的l=0%永远是黑，l=100%永远是白，中间的“蓝”会随l变化明显失真——想保蓝感，l控制在20%–80%更稳妥。
