CSS透明度Bug：为何article元素呈现透明状态？

算力阿峰

2026-7-9

解决CSS中article元素意外透明的问题

问题根源

你给body设置了opacity: 0.8，这个属性会传递给所有子元素，包括article。哪怕article本身没设置opacity，也会继承这个透明效果，导致它看起来是透明的。

解决方案

把body的opacity替换为背景色的rgba值，这样只会让body的背景半透明，不会影响子元素：

修改后的CSS代码

body {
  /* 用rgba设置背景色的透明度，代替全局opacity */
  background-color: rgba(0, 0, 0, 0.8);
  background-image: linear-gradient(30deg, #FFF8E7 12%, transparent 12.5%, transparent 87%, #FFF8E7 87.5%, #FFF8E7), linear-gradient(150deg, #FFF8E7 12%, transparent 12.5%, transparent 87%, #FFF8E7 87.5%, #FFF8E7), linear-gradient(30deg, #FFF8E7 12%, transparent 12.5%, transparent 87%, #FFF8E7 87.5%, #FFF8E7), linear-gradient(150deg, #FFF8E7 12%, transparent 12.5%, transparent 87%, #FFF8E7 87.5%, #FFF8E7), linear-gradient(60deg, #FFF8E777 25%, transparent 25.5%, transparent 75%, #FFF8E777 75%, #FFF8E777), linear-gradient(60deg, #FFF8E777 25%, transparent 25.5%, transparent 75%, #FFF8E777 75%, #FFF8E777);
  background-size: 44px 77px;
  background-position: 0 0, 0 0, 22px 39px, 22px 39px, 0 0, 22px 39px;
}

article {
  background-color: #FFF8E7;
}