如何为带背景图的动态宽度DIV制作两侧镂空孔洞？

我来帮你搞定这个动态镂空的需求！其实用clip-path就能完美实现，而且完全支持背景图和宽度动态调整，之前的问题只是写法不对而已。

最终实现代码 #

先看完整的可运行示例：

html, body { 
  padding: 0; 
  margin: 0; 
  background: #222; 
} 
p { 
  color: #FFF; 
  text-align: center; 
  margin: 2rem 0 1rem;
} 
.hollow-box {
  width: 300px; /* 可以随便修改这个值，或者用JS动态调整，孔洞位置会自动适配 */
  height: 50px;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  background: url("https://loremflickr.com/320/240");
  /* 核心逻辑：先定义整个DIV的显示区域，再挖掉两个圆形孔洞 */
  clip-path: inset(0 0 0 0) 
             circle(10px at 20px 50%) 
             circle(10px at calc(100% - 20px) 50%);
}

<p>调整上方.box的width值，测试动态适配效果</p>
<div class="hollow-box"></div>

原理说明 #

• clip-path: inset(0 0 0 0)：先把整个DIV区域设为初始显示范围
• 后面的两个circle()是减法操作，会从初始区域中挖掉对应的圆形：
  • 第一个圆：位置在左侧20px、垂直居中50%，半径10px
  • 第二个圆：用calc(100% - 20px)定位右侧距离边缘20px的位置，垂直同样居中，这样DIV宽度变化时，这个圆会自动跟着右边缘移动，始终保持20px间距

为什么之前的尝试没成功？ #

• 你之前的clip-path只写了单个圆形，这会让DIV只显示这个圆形区域，而不是挖掉它；现在用inset作为基础再叠加圆形，就实现了反向镂空
• 径向渐变方案确实没法同时使用背景图，因为渐变本身就是背景属性，所以clip-path是更适合的方案

如果需要兼容非常老的浏览器，可以考虑用伪元素叠加的方案，但现代浏览器对这种复合clip-path的支持已经很好了。

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