如何使用CSS为图片添加底部径向渐变叠加层？

你当前使用的径向渐变默认从容器中心开始渲染，会覆盖整个容器区域，要实现示例图的底部渐变效果，仅需调整径向渐变的配置即可，调整后的完整代码如下：

#artist-image-container{
      background-image:
      radial-gradient(ellipse 100% 70% at bottom, #181c44 10%, rgba(245, 246, 252, 0) 70%),url('./yo yo honey singh.jpg');
      width: 34%;
      min-width: 34%;
      min-height: 300px;
      background-size: cover;
      color: white;
      background-repeat: no-repeat;
      background-position: center;
      padding: 20px;
 }

关键改动说明 #

• 给radial-gradient添加at bottom参数，指定渐变的原点在容器底部，渐变方向从下往上扩散
• 新增ellipse 100% 70%参数控制渐变形状为椭圆，横向占满容器宽度，纵向仅覆盖底部70%高度，避免渐变延伸到容器顶部
• 调整渐变颜色顺序：渐变内圈（底部位置）使用深色#181c44，向外（向上）逐渐过渡到完全透明，保证容器上方的图片可以正常显示
• 新增background-position: center保证背景图居中裁剪，避免展示偏移

如果需要调整渐变效果可以自定义参数：

• 修改椭圆的第二个百分比（示例中为70%）：数值越大渐变覆盖的高度越高，数值越小渐变越集中在底部
• 修改深色后的百分比（示例中为10%）：数值越大底部纯色区域的宽度越大
• 调整透明色的alpha值：如果需要容器上方也带轻微遮罩效果，可以将rgba(245, 246, 252, 0)的最后一个参数调整为0.1~0.3之间

内容的提问来源于stack exchange，提问作者Akash Kumar Singh