CSS 中如何正确设置透明度而不影响子元素？

css 的 opacity 属性会作用于整个元素及其所有子元素，导致子元素（如 article）也变透明；正确做法是避免在父容器上使用 opacity，改用 rgba() 或十六进制带 alpha 通道的颜色值控制背景透明度。

css 的 opacity 属性会作用于整个元素及其所有子元素，导致子元素（如 article）也变透明；正确做法是避免在父容器上使用 opacity，改用 rgba() 或十六进制带 alpha 通道的颜色值控制背景透明度。

在 CSS 中，opacity 是一个继承性视觉属性——但它并非真正“继承”，而是将整个渲染树（包括所有后代元素）统一应用透明度混合。这意味着：当你给

设置 opacity: 0.8 时，不仅背景变淡，其内部所有子元素（包括

、

等）都会被强制降为 80% 不透明度，无法通过子元素自身设置 opacity: 1 来恢复。

你原始代码的问题根源正在于此：

body {
  background-color: #000000;
  opacity: 0.8; /* ❌ 错误：全局透明化 body 及所有后代 */
  background-image: linear-gradient(...);
}

即使

设置了纯白背景 #FFF8E7，它仍会因父级 opacity: 0.8 而呈现半透明效果，文字可读性下降，视觉层次混乱。

✅ 正确解法：移除 opacity，改用支持 Alpha 通道的背景色声明

使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

对于纯色背景：

body {
  /* 替换 #000000 → rgba(0, 0, 0, 0.8) 或 #000000CC */
  background-color: rgba(0, 0, 0, 0.8);
  /* 或等价写法（8位十六进制：AA = 十六进制透明度，CC ≈ 0.8） */
  /* background-color: #000000CC; */
  background-image: linear-gradient(30deg, #FFF8E7 12%, transparent 12.5%, ...);
  background-size: 44px 77px;
  background-position: 0 0, 0 0, 22px 39px, 22px 39px, 0 0, 22px 39px;
}

对于渐变背景中的颜色（如示例中 #FFF8E777），已使用 8 位 hex（末两位 77 ≈ 47% 透明度），这是合理做法；但注意：标准 CSS 不支持 #RRGGBBAA 在所有旧浏览器中生效（IE 完全不支持，Edge 16+、Chrome 65+、Firefox 49+ 支持）。若需兼容性保障，优先使用 rgba()。

? 补充建议：

若需对背景图单独调透明度（而非整个容器），可借助伪元素分层实现：

body::before {
  content: "";
  position: fixed;
  top: 0; left: 0; width: 100%; height: 100%;
  background: linear-gradient(...);
  opacity: 0.3; /* ✅ 安全：仅作用于伪元素，不影响真实内容 */
  z-index: -1;
}