如何让渐变遮罩仅覆盖图片网格内图片，隐藏其余区域？

不用在body上放置全局渐变，直接把渐变限定在图片网格容器内部，再让网格内的图片与渐变叠加，具体实现方案如下：

方法一：容器背景+混合模式（推荐） #

这种方式直接把渐变限制在网格范围内，无需额外裁剪：

1. 配置图片网格容器的布局与渐变背景：

.image-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 实现每行4张图片 */
  gap: 12px; /* 可选，设置图片间的间距 */
  background: linear-gradient(45deg, #ff4d4d, #4d79ff); /* 替换成你需要的渐变样式 */
}

2. 给网格内的图片设置混合模式，让图片与容器渐变融合：

.image-grid img {
  width: 100%;
  height: auto;
  mix-blend-mode: overlay; /* 可根据需求更换为multiply、screen等混合模式 */
}

方法二：伪元素覆盖+裁剪（适配body已有渐变的场景） #

如果必须保留body上的全局渐变，可通过伪元素截取渐变到网格内：

1. 先保留body的渐变设置：

body {
  margin: 0;
  background: linear-gradient(45deg, #ff4d4d, #4d79ff);
}

2. 给网格容器设置定位与裁剪，并用伪元素覆盖渐变：

.image-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  overflow: hidden; /* 裁剪超出容器范围的内容 */
}

.image-grid::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: inherit; /* 继承body的渐变样式 */
  pointer-events: none; /* 不影响图片的点击等交互 */
  mix-blend-mode: overlay;
  z-index: 2; /* 让渐变覆盖在图片上方 */
}

.image-grid img {
  width: 100%;
  height: auto;
  position: relative;
  z-index: 1; /* 确保图片在渐变下方 */
}

你之前使用mask-image或clip-path未生效，大概率是选择器未选中目标元素，或属性值格式错误。比如给网格容器添加clip-path: inset(0)即可裁剪到容器边界，搭配相对定位就能生效，但上述两种方法更直接易维护。

内容的提问来源于stack exchange，提问作者Tomas Eli Olafsson