如何将linear gradient移至图片底部实现渐隐效果？

先修正几个关键问题，再调整渐变参数实现你要的图片底部向黑色渐隐的效果：

• 选择器错误：你的section元素带id#section，但伪元素用了section:before，需改成#section:before才能生效
• 渐变高度过大：2000px的高度会让渐变覆盖太多区域，应根据图片高度设置合适值（比如300px-800px）
• 渐变方向与色标优化：调整渐变方向和色标位置，让透明到黑色的过渡更自然
• 层级结构梳理：把背景图放在section元素内，让渐变伪元素直接覆盖在图片上方，逻辑更清晰

修正后的完整代码：

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: black;
    min-height: 3000px;
}

#section {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh; /* 用视口高度限制图片显示区域 */
    background-image: url("images/background.png");
    background-repeat: no-repeat;
    background-size: cover; /* 让图片铺满容器 */
    background-position: center; /* 居中显示图片 */
    pointer-events: none;
    overflow: hidden;
}

#section:before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 500px; /* 可根据需求调整渐变高度 */
    /* 从底部纯黑向上过渡到透明，匹配渐隐需求 */
    background: linear-gradient(to top, #000 0%, rgba(0,0,0,0) 100%);
    z-index: 1;
}

关键调整说明 #

1. 选择器修正：确保伪元素绑定到目标id元素上，避免样式不生效
2. 背景图迁移：将背景图从body移到#section，让渐变直接覆盖在图片上方，层级关系更明确
3. 渐变方向调整：使用to top方向，让黑色从底部开始向上逐渐透明，刚好实现底部渐隐效果
4. 渐变高度控制：缩小渐变高度，避免过度遮挡图片主体内容
5. 图片适配优化：添加background-size: cover和background-position: center，让图片更好地适配容器尺寸

如果需要更贴合参考图的过渡效果，可微调渐变色标：

background: linear-gradient(to top, #000 0%, rgba(0,0,0,0.7) 40%, rgba(0,0,0,0) 100%);

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