在css中利用变量动态调整元素透明度，核心做法是定义一个包含透明度的自定义属性（如 --opacity-val），并在 opacity 或 rgba() 中通过 var() 引用它。这样只需修改变量值即可全局或局部控制透明度，无需重复编写样式。
CSS变量如何影响opacity属性
当直接将CSS变量赋值给 opacity 时，浏览器会解析该变量的数值并直接应用。如果变量值为0到1之间的小数，元素透明度随之变化；若未定义变量，则使用回退值或默认行为。
.box {
--my-opacity: 0.5;
opacity: var(--my-opacity);
}上述代码中，.box 的透明度被设置为0.5。修改 --my-opacity 的值即可实时调整透明度。
立即学习“前端免费学习笔记（深入）”；
在rgba()中使用CSS变量
除了直接使用 opacity，还可以将变量嵌入 rgba() 函数中，用于设置颜色的透明度部分。这种方式允许同时控制颜色和透明度，且变量仅影响透明度通道。
.box {
--alpha: 0.8;
background-color: rgba(255, 0, 0, var(--alpha));
}这里 --alpha 控制红色的透明度为0.8。更改 --alpha 只会改变透明度，不影响颜色本身。
基于媒体查询动态调整透明度
结合媒体查询，可以根据屏幕尺寸动态调整CSS变量的值，从而实现响应式透明度效果。例如，在小屏幕上降低透明度以突出其他内容。
:root {
--bg-opacity: 1;
}
@media (max-width: 600px) {
:root {
--bg-opacity: 0.7;
}
}
.box {
background-color: rgba(0, 0, 255, var(--bg-opacity));
}当视口宽度小于600px时，--bg-opacity 变为0.7，蓝色背景透明度降低。这种机制无需JavaScript即可实现动态样式切换。
