能否通过CSS隐藏PNG图片同时保留drop-shadow投影效果？

当然可以直接用CSS实现，无需借助Photoshop。你当前通过平移元素+偏移投影的方法虽然能生效，但存在依赖视口宽度的局限性，这里提供两种更简洁可靠的方案：

方案一：利用opacity: 0隐藏原图 #

将图片的透明度设为0，此时原图完全不可见，但drop-shadow滤镜会基于图片的原始轮廓生成投影，完美保留你需要的效果：

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

.photo {
  width: 100%;
  /* 隐藏原图 */
  opacity: 0;
  /* 添加投影效果 */
  filter: drop-shadow(0 10px 5px #ff0000);
  position: relative;
  display: block;
}

<div>
  <img src="nba.png" alt="..." class="photo">
</div>

方案二：使用clip-path裁剪掉原图 #

通过clip-path将图片的可视区域裁剪为0，只保留投影的显示空间，这种方法不会影响元素的布局位置：

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

.photo {
  width: 100%;
  /* 裁剪掉所有可视区域 */
  clip-path: inset(100%);
  /* 添加投影效果 */
  filter: drop-shadow(0 10px 5px #ff0000);
  position: relative;
  display: block;
}

<div>
  <img src="nba.png" alt="..." class="photo">
</div>

补充说明 #

你原方法的思路是可行的：通过transform: translate(-100%, 0%)把原图移出可视区域，同时用drop-shadow的X轴偏移把投影拉回屏幕内，但如果图片宽度不是100%视口宽度，--distance: 100vw的设置会导致投影位置偏移不准确，上面的两种方案则没有这个限制。

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