Jcrop在设置background-color的div内图片无法显示问题求助

问题原因 #

Jcrop自动生成的图片容器层级默认低于外层div的背景层，外层div设置背景色后会直接覆盖内部的裁剪图片区域，但是Jcrop的选区逻辑不受层级影响，所以选区功能仍可正常使用。

解决方法 #

你可以任选以下一种方案修复：

• 方案1：调整层级优先级，给外层div开启定位，同时提升Jcrop容器的层级
  新增以下CSS规则即可：

  /* 替换为你实际的外层div类名/选择器 */
  .outer-div {
    background-color: blue;
    position: relative; /* 新增定位上下文 */
  }
  /* Jcrop默认生成的容器类，不需要修改类名 */
  .jcrop-holder {
    z-index: 1; /* 提升层级到外层背景之上 */
  }
  

• 方案2：将背景色设置转移到Jcrop容器上，避免外层背景覆盖
  先移除外层div的background-color属性，再新增以下CSS：

  .jcrop-holder {
    background-color: blue;
  }
  

如果修改后仍存在异常，可以检查是否给外层div设置了overflow: hidden以外的异常overflow规则，或者给内部图片元素设置了负z-index属性，清理冲突规则即可。

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