CSS背景渐变叠加背景图不显示问题求助（无需额外div）

问题出在多层背景的层级关系：你声明的线性渐变是第一个背景层，会覆盖在后面的PNG图片之上，且渐变完全不透明（rgba的alpha值为1），所以图片被完全遮挡。以下是几种无需额外添加div的解决方式：

方式一：降低渐变的不透明度 #

将渐变颜色的alpha通道值设为小于1的数值，让图片可以透过渐变显示：

div {
  background: linear-gradient(180deg, rgba(224, 34, 153, 0.6) 0%, rgba(88, 0, 55, 0.6) 100%), url('path/to/image/png') no-repeat;
  /* 可选：根据需求设置背景尺寸等属性 */
  background-size: cover;
}

你可以调整alpha值（示例中的0.6）来平衡渐变的深浅和图片的清晰度。

方式二：使用背景混合模式 #

通过background-blend-mode属性让渐变与图片以混合效果叠加显示，无需降低渐变透明度：

div {
  background: linear-gradient(180deg, rgba(224, 34, 153, 1) 0%, rgba(88, 0, 55, 1) 100%), url('path/to/image/png') no-repeat;
  background-blend-mode: overlay; /* 可尝试multiply、screen、soft-light等值获得不同混合效果 */
  background-size: cover;
}

可选：调整背景层顺序 #

如果需要图片显示在渐变上方（仅适合图片存在透明区域的场景），可以交换渐变与图片的声明顺序：

div {
  background: url('path/to/image/png') no-repeat, linear-gradient(180deg, rgba(224, 34, 153, 1) 0%, rgba(88, 0, 55, 1) 100%);
}

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