你遇到的问题主要有两个原因：一是你的线性渐变没有设置透明过渡，完全不透明的渐变会直接盖住背景图；二是背景图层的顺序和属性写法需要调整。

正确的实现代码 #

body {
  height: 100vh;
  /* 上层是线性渐变（从透明到深色，实现淡出），下层是背景图 */
  background: 
    linear-gradient(180deg, transparent 0%, rgba(23,26,25,1) 100%),
    url('./images/bg.jpg') no-repeat center/cover;
}

关键要点解释 #

• 图层顺序：CSS中background属性的多个值是按从上层到下层的顺序排列的。所以我们把渐变写在前面，作为上层覆盖在背景图上；背景图写在后面，作为底层显示。
• 透明渐变：把渐变的起始颜色改成transparent（或者rgba(23,26,25,0)），这样渐变会从完全透明过渡到你想要的深色，既能看到下方的背景图，又能实现淡出效果。
• 背景图属性优化：用center/cover可以让背景图居中并铺满容器，避免出现空白区域。

如果想要调整淡出的位置（比如让渐变在图片下半部分开始生效），可以修改渐变的百分比参数，比如：

linear-gradient(180deg, transparent 60%, rgba(23,26,25,1) 100%)

这样前60%的区域是完全透明的，从60%的位置开始逐渐过渡到深色，淡出效果会更自然。

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