如何实现子DIV超出父DIV区域的部分半透明不裁切

• 页面实现DIV嵌套结构：外层DIV（outerdiv）内部包含支持用户自主调整尺寸的子DIV（innerdiv）
• 现存实现矛盾：
  • 未给父DIV设置overflow:hidden时，子DIV尺寸调大后会完全覆盖父DIV区域
  • 给父DIV设置overflow:hidden后，子DIV超出父DIV的边缘部分会被直接裁切，用户无法查看溢出内容
• 预期效果：子DIV超出父DIV边界的部分通过透明度差异化显示，等价于假想属性overflow: opacity .3的表现：父DIV边界内的子DIV内容保持正常不透明度，超出边界的部分为半透明状态。例如红色子DIV在父框内显示为纯红色，超出部分显示为半透明浅粉色，两部分同属一个DIV元素，参考效果如下：
  
• 现有未达预期的代码如下，接受基于现有代码结构改造，也支持原生JavaScript/jQuery实现方案：

.frame {
  width:200px;
  height:200px;
  margin-left:auto;
  margin-right:auto;
  display;block;
  margin-top:30px;
}

.outerdiv {
width:200px;
height:200px;
 background:gray;
 border:solid 1px #C0C0C0;
}

.innerdiv {
  width:240px;
  height:240px;
  position:absolute;
  background:red;
  margin-left:-20px;
  margin-top:-20px;
  opacity:.2
}

<div class="frame">
<div class="outerdiv">
<div class="innerdiv">
</div>
</div>
</div>

采用CSS Mask（遮罩）方案实现，无需新增冗余DOM节点，可支持子元素内任意内容（纯色背景、渐变、图片、文字、嵌套节点）的透明度差异化显示，配合少量JS即可在子元素尺寸、位置变动时实时更新效果，性能开销极低。

完整代码 #

CSS部分 #

.frame {
  width: 200px;
  height: 200px;
  margin: 30px auto 0;
  display: block; /* 修复原代码分号误写的语法错误 */
}

.outerdiv {
  width: 200px;
  height: 200px;
  background: gray;
  border: solid 1px #C0C0C0;
  position: relative; /* 作为子元素定位基准，无需设置overflow:hidden */
}

.innerdiv {
  width: 240px;
  height: 240px;
  position: absolute;
  background: red;
  left: -20px;
  top: -20px;
  /* 可自定义溢出部分透明度 */
  --overflow-opacity: 0.3;
  /* 遮罩实现双层透明度：底层全区域半透，上层重叠区域全不透明 */
  -webkit-mask:
    linear-gradient(rgba(0,0,0,var(--overflow-opacity)), rgba(0,0,0,var(--overflow-opacity))),
    linear-gradient(#000, #000);
  -webkit-mask-composite: source-over;
  -webkit-mask-clip: border-box, inset(var(--clip-inset, 20px 20px 20px 20px));
  mask:
    linear-gradient(rgba(0,0,0,var(--overflow-opacity)), rgba(0,0,0,var(--overflow-opacity))),
    linear-gradient(#000, #000);
  mask-composite: add;
  mask-clip: border-box, inset(var(--clip-inset, 20px 20px 20px 20px));
}

JS逻辑（适配子元素调整尺寸/拖拽场景） #

子元素尺寸、位置变动时，调用更新函数计算四个方向的溢出偏移量，动态更新遮罩裁切参数即可：

const outerDiv = document.querySelector('.outerdiv')
const innerDiv = document.querySelector('.innerdiv')
const outerRect = outerDiv.getBoundingClientRect()

function updateOverflowMask() {
  const innerRect = innerDiv.getBoundingClientRect()
  // 计算四个方向相对于父元素边界的溢出值，未溢出时取0
  const top = Math.max(0, outerRect.top - innerRect.top)
  const right = Math.max(0, innerRect.right - outerRect.right)
  const bottom = Math.max(0, innerRect.bottom - outerRect.bottom)
  const left = Math.max(0, outerRect.left - innerRect.left)
  // 更新CSS变量，驱动遮罩裁切位置变化
  innerDiv.style.setProperty('--clip-inset', `${top}px ${right}px ${bottom}px ${left}px`)
}

// 初始化执行一次
updateOverflowMask()
// 若使用拖拽/调整尺寸组件，在对应的resize、drag回调中调用updateOverflowMask()即可

兼容性说明：该方案支持所有Chromium内核浏览器、Firefox、Safari 15.4+等现代浏览器，覆盖绝大多数用户使用场景。

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