如何用原生HTML和CSS实现div背景色透明度渐变且不影响文字

要实现仅背景色透明度渐变、不影响内部元素的效果，直接对background-color属性做过渡/动画即可，不需要修改元素的opacity（opacity会作用于整个元素，包含所有子内容）。以下是两种常用原生实现方式：

方法1：transition触发式动画（适合hover、加类等场景触发） #

<div class="box">
  内部文字，透明度不会随背景变化
</div>

.box {
  width: 300px;
  padding: 24px;
  font-size: 16px;
  /* 初始背景：透明度为0 */
  background-color: rgba(90, 129, 229, 0);
  /* 仅给背景色属性设置3秒过渡效果 */
  transition: background-color 3s ease;
}

/* 触发条件示例：hover时切换到目标透明度 */
.box:hover {
  background-color: rgba(90, 129, 229, 0.3);
}

如果需要页面加载就自动触发，可在页面加载完成后给元素加一个自定义类，把目标背景色写在该类的样式规则里即可，动画全程由CSS接管。

方法2：@keyframes自动播放动画（页面加载后直接执行） #

<div class="box">
  内部文字，透明度不会随背景变化
</div>

/* 定义仅修改背景色的关键帧 */
@keyframes bgAlphaFade {
  from {
    background-color: rgba(90, 129, 229, 0);
  }
  to {
    background-color: rgba(90, 129, 229, 0.3);
  }
}

.box {
  width: 300px;
  padding: 24px;
  font-size: 16px;
  /* 应用动画：动画名 时长 缓动 保持最终状态 */
  animation: bgAlphaFade 3s ease forwards;
}

内容的提问来源于stack exchange，提问作者SomeRandomCoder