0Pricing
CSS Academy · 课时

不透明度与 RGBA 透明效果

使用 opacity 属性和 rgba() 颜色值控制元素的透明度。

不透明度与 RGBA 透明效果 是 CoddyKit 上的免费 CSS Academy 课时。 这是第 4 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 CSS Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 CSS Academy 课程共包含 4 节课。

opacity 属性

opacity 属性会设置整个元素的透明度，包括其子元素和内容。取值范围是 0（完全透明）到 1（完全不透明）。

<div class="overlay">Overlay at 50% opacity</div>

opacity 会影响所有子元素

需要特别注意：opacity 会影响整个元素树。位于 opacity: 0.5 元素内部的文字、图像和子元素都会变为 50% 透明，您无法让子元素比其父元素更不透明。

仅使用 RGBA 使颜色透明

如果只想让背景颜色透明，而不影响文字或子元素，请使用 rgba()，不要使用 opacity：

<div class="card">Card with transparent background, opaque text</div>

RGBA 与 opacity 的比较

可以这样理解：

  • opacity: 0.5 — 整个元素及其子元素都会变透明
  • rgba(r,g,b,0.5) — 只有颜色值变透明，子元素不受影响

HSLA 透明度

同样的原则也适用于 hsla()。第四个参数是透明度通道（0–1）：

<div class="tooltip">Tooltip with HSLA background</div>

现代空格分隔语法

现代 CSS 允许在 rgb() 和 hsl() 中使用斜杠分隔透明度，而不使用带“a”的变体：

<div class="modern-rgb">rgb(0 0 0 / 0.5)</div>
  <div class="modern-hsl">hsl(0 0% 0% / 0.5)</div>

opacity: 0 与 visibility: hidden、display: none

这三种方式都会隐藏元素，但效果不同：

  • opacity: 0 — 元素不可见，但仍占据空间并且可以点击
  • visibility: hidden — 元素不可见，占据空间，但无法点击
  • display: none — 元素会从布局中完全移除

使用 opacity 过渡

由于 opacity 会在 GPU 上进行合成，因此它是最适合动画处理、开销最低的 CSS 属性之一。淡入和淡出效果应始终使用 opacity 过渡，而不是 background-color 过渡。

<div class="modal visible">Fades in via opacity transition</div>

透明背景模式

如果希望元素具有半透明背景，同时保持文字完全清晰，请在 background-color 上使用 rgba()：

<div class="glass-card">Glass effect card</div>

边框和盒阴影中的透明度

在 border-color 和 box-shadow 中使用 RGBA，可以创建细腻的透明效果：

<div class="card">Card with alpha border &amp; shadow</div>

无障碍提醒

低透明度文字会降低可读性，并且可能不符合 WCAG 的颜色对比度要求。在文字上使用透明度时，请务必检查对比度比例。普通文字的对比度比例至少应为 4.5:1。

快速检查

一个元素设置了 opacity: 0.3。其中的文字会发生什么变化？

回顾

opacity 会使整个元素及其子元素变透明。若要使用透明颜色而不影响子元素，请使用 rgba() 或 hsla()。透明度过渡会使用 GPU 加速，性能良好。在文字上使用透明度时，请始终检查对比度比例。

常见问题解答

「不透明度与 RGBA 透明效果」课时是免费的吗？

是的 — 「不透明度与 RGBA 透明效果」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 CSS Academy 课程的其余内容，请升级到 CoddyKit PRO。 CSS Academy 课程共包含 4 节课。

「不透明度与 RGBA 透明效果」这节课中我会学到什么？

使用 opacity 属性和 rgba() 颜色值控制元素的透明度。 你通过在浏览器中直接运行的动手代码来练习 CSS Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 CSS Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 CSS Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 4 节课，共 4 节。

「不透明度与 RGBA 透明效果」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 CSS Academy 课中编写并运行代码吗？

能。每节 CSS Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

  1. 颜色值：名称、十六进制、RGB、HSL
  2. 背景颜色与图像
  3. 渐变：线性与径向
  4. 不透明度与 RGBA 透明效果
← 返回 CSS Academy