如何仅通过设置span样式实现绝对定位图片在多个span背景中分段显示

可以实现，你单独设置mask-image不生效是因为没有配套配置遮罩的定位、尺寸属性，也可以选择兼容性更好的背景定位方案实现，两种常用实现方式如下：

该方案不需要调用遮罩属性，所有span共用同一张背景图，仅通过偏移背景位置就能让不同span显示图片的不同区域，完美适配动态生成span的场景：

• 先给所有span设置统一基础样式：

span {
  /* 统一引用目标图片作为背景 */
  background-image: url("你的图片地址.png");
  /* 背景尺寸统一设置为你需要的整张图片的展示尺寸，和原图尺寸保持一致即可 */
  background-size: 800px 600px;
  background-repeat: no-repeat;
  /* 按你需要的单块区域尺寸设置span宽高，比如要每个span显示200*200的图片区块就设对应值 */
  width: 200px;
  height: 200px;
  display: inline-block;
}

• 动态生成span时，直接给每个span的行内样式设置background-position即可：要显示左上角第一块区域就设为background-position: 0 0;，要显示右侧相邻区域就设为background-position: -200px 0;，以此类推，负值代表把背景图往对应方向偏移，刚好露出目标区域。你可以直接按span的生成索引自动计算偏移值，不需要手动编写每个span的样式。

如果确实需要用遮罩能力实现，需要配套设置遮罩的尺寸、定位属性，同时要补充webkit内核前缀兼容主流浏览器：

span {
  background-image: url("你的图片地址.png");
  background-size: 100% 100%;
  width: 200px;
  height: 200px;
  display: inline-block;
  /* 遮罩基础配置 */
  mask-image: url("你的图片地址.png");
  mask-size: 800px 600px;
  mask-repeat: no-repeat;
  /* 兼容Chrome、Safari等webkit内核浏览器 */
  -webkit-mask-image: url("你的图片地址.png");
  -webkit-mask-size: 800px 600px;
  -webkit-mask-repeat: no-repeat;
}

• 动态生成span时给每个span设置对应mask-position和-webkit-mask-position即可，定位逻辑和上述背景定位方案完全一致。

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