是否可以使用CSS将背景图片的下半部分设置为纯白色？

完全可以实现，不需要修改原图，推荐两种常用的实现方式：

方案1：伪元素遮罩（适合img标签引入图片的场景） #

给图片外层套一个容器，通过绝对定位的伪元素覆盖图片下半部分，代码示例如下：

• CSS代码

.img-wrapper {
  position: relative;
  display: inline-block;
  line-height: 0; /* 消除图片默认底部空白 */
}
.img-wrapper::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 50%; /* 可自定义修改覆盖高度比例 */
  background: #ffffff;
}

• HTML代码

<div class="img-wrapper">
  <img src="你的图片地址" alt="项目图片">
</div>

方案2：背景渐变叠加（适合图片作为背景的场景） #

如果你的图片是通过background引入的，直接叠加一层渐变即可，代码示例：

.img-bg {
  width: 600px; /* 自定义容器宽度 */
  height: 400px; /* 自定义容器高度 */
  background: 
    linear-gradient(to top, #fff 50%, transparent 50%),
    url("你的图片地址") center/cover no-repeat;
}

以上两种方案都可以灵活调整白色覆盖区域的高度，把代码里的50%修改为你需要的数值即可，实现成本低，不会影响页面加载性能。

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