在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() 函数中，用于设置颜色的透明度部分。这种方式允许同时控制颜色和透明度，且变量仅影响透明度通道。

CSS

CSS 官方网站入口。访问 W3C 的 CSS 页面，查看 CSS 标准、学习资料与工作组动态；CSS 是 Web 标准，无需下载安装。

下载

.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即可实现动态样式切换。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！