如何用CSS渐变替代图片实现当前卡片背景效果？

要替换原代码中的背景图片为CSS渐变，只需移除图片相关的背景属性，改用linear-gradient()创建渐变背景即可，具体如下：

修改后的完整代码 #

CSS代码 #

.wrap {
  display: flex;
  gap: 30px;
}
.item {
  flex-basis: 382px;
  /* 用线性渐变替代背景图片，可根据需求调整颜色和方向 */
  background: linear-gradient(180deg, #DCEBFF 0%, #3A86FF 100%);
  min-height: 218px;
  border-radius: 20px;
  box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.25);
  padding: 32px;
}

HTML代码 #

<div class="wrap">
  <div class="item"></div>
  <div class="item"></div>
</div>

自定义调整提示 #

• 如果需要更贴近原图片的渐变效果，可以修改渐变方向（比如to right、135deg）、颜色节点的百分比和具体色值
• 若要实现径向渐变效果，可替换为radial-gradient()，语法逻辑和线性渐变一致

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