正在加载...

CSS 透明度

你会用纯色、照片和渐变了。有时希望整个元素看起来更柔和——淡一层、禁用按钮、退后的卡片。这就是 opacity 的工作：整块盒子看起来有多不透明或多通透。

opacity 做什么？

opacity 属性设定元素有多不透明。取值从 1（完全实心，多数元素的默认）到 0（完全看不见）。像 0.5 这样的小数在中间。重要：opacity 作用于元素及其内部的一切——文字、边框、背景和子盒子一起变淡。

Opacity 与颜色 alpha

这两个概念很容易搞混。分开记。

📊 Opacity 与颜色 alpha

工具 变淡什么 典型用途
opacity 整个元素（及其子元素） 柔和叠层、禁用外观、以后的淡入淡出
rgba() / hsla() 的 alpha 仅该颜色层 透明背景上叠实心文字
关键字 transparent 完全透明的颜色值 隐藏边框色又不删属性
visibility: hidden 视觉隐藏但保留布局 另一工具——此处不深讲

完全实心与半淡

先在同一卡片设计上比较 1 与 0.5。

实心 vs 一半 opacity

css
CSS Code 
.card-solid {
opacity: 1;
background-color: #ccfbf1;
color: #042f2e;
padding: 1rem;
}

.card-soft {
opacity: 0.5;
background-color: #ccfbf1;
color: #042f2e;
padding: 1rem;
}

你该看到什么

在 .card-soft 上，背景和文字都像被冲淡。Opacity 不会放过字母。

子元素随父元素一起淡

若父元素是 opacity: 0.4，嵌套的标题和按钮不能靠自己设 opacity: 1「逃出去」。它们已经画在变淡的层里。

父级 opacity 冲淡子元素

css
CSS Code 
.overlay {
opacity: 0.4;
background-color: #0f172a;
color: white;
padding: 1rem;
}

.overlay strong {
opacity: 1; /* 在已淡的父级内无法恢复满强度 */
}

设计含义

要磨砂面板却要清晰文字？用 rgba 淡化背景色，不要用 opacity 淡化整个元素。

只要填充变软时优先 rgba

这里面板背景半透明，文字仍是满强度。

柔和填充、实心文字

css
CSS Code 
.panel {
background-color: rgba(15, 118, 110, 0.25);
color: #042f2e; /* 满强度文字 */
padding: 1rem;
}

弱化 UI 的习惯

常见做法：次要操作或禁用控件略降 opacity，让它们更安静——但仍保持可读对比度。

弱化的次要按钮

css
CSS Code 
.btn-secondary {
opacity: 0.75;
background-color: #e2e8f0;
color: #0f172a;
border: none;
padding: 0.5rem 1rem;
}

零是看不见——空间可能还在

opacity: 0 让元素看不见，但仍可能占布局空间，并按上下文接收指针事件。要从布局去掉，那是别的工具（display: none），不只是 opacity。

看不见但仍在流里

css
CSS Code 
.ghost {
opacity: 0;
}

自己动手

  1. 两张同色卡片；一张 opacity: 1，一张 opacity: 0.5。
  2. 在 opacity: 0.4 的父级里放一行加粗——确认无法把子元素完全「还原」。
  3. 用 background-color: rgba(…, 0.25) 加实心 color 重建柔和效果。
  4. 次要按钮设 opacity: 0.75 并检查可读性。
  5. 可选：给盒子设 opacity: 0，观察布局里仍留下的空隙。

常见错误

  • 只想透明背景却给父级加 opacity
  • 指望子元素 opacity: 1 在淡父级里仍完全实心
  • 用 opacity: 0 代替从布局移除
  • opacity 降到文字对比度失败
  • 把 transparent 关键字当成 opacity 属性

小结

  • opacity 设定整个元素有多透明（0–1）
  • 子元素随父一起淡——从内部无法完全逃脱
  • 要柔和背景加实心文字，优先 rgba / hsla 的 alpha
  • 低 opacity 可弱化 UI；留意无障碍
  • 看不见（0）不等于移出布局
  • 练卡片对与 rgba 重建，直到差别一目了然

🧠 测试您的知识

准备开始

测试您的知识

通过这个互动测验挑战自己，看看你对这个主题的理解程度如何

❓
8
问题
🎯
70%
及格要求
♾️
∞
时间
🔄
∞
尝试次数

📝 说明

  • 仔细阅读每个问题
  • 为每个问题选择最佳答案
  • 您可以随时重新参加测验
  • 您的进度将显示在顶部
主题 1 的 1
Css 教程