在DIV的切口孔与背景图象

Question

如何将多个“洞”切割成使用背景图像的DIV？ DIV的宽度动态，但是每侧的孔总是20px，垂直方向是一半。

所以要澄清一下，div宽度会改变，但是我想找到一种方法来制作两个洞（一个在左边，另一个在右边），它可以穿过DIV，这将揭示DIV背后的任何东西。 / p>

我见过类似的依赖SVG的解决方案，但专门放置圆圈，而不是动态改变位置。

图片示例

代码示例

Codepen链接：https://codepen.io/anon/pen/rKNgXX

html,
body {
  padding: 0;
  margin: 0;
  background: #222;
}

p {
  color: #FFF;
  text-align: center;
}

#example {
  width: 300px;
  height: 50px;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  background: url("https://loremflickr.com/320/240");
  clip-path: circle(10px at 20px 50%);
}

#exampleTwo {
  width: 300px;
  height: 50px;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  background: -webkit-radial-gradient(20px 50%, circle, transparent 10px, #000 10px);
}

<p>Using Clip Path (needs to be inverse, and have a second circle)</p>
<div id="example"></div>
<p>Using Radial Gradient (can't use background image, and have a second circle)</p>
<div id="exampleTwo"></div>

我尝试过多种方法并失败了。

Answer 1

这对你有用吗？:(当我设置一个比stackoverflow片段高度更大的高度时，你需要向下滚动示例）

npm i @fortawesome/fontawesome

.image {
  width: 100%;
  height: 400px;
  background-image: url(https://images.unsplash.com/photo-1501232410586-d37be9ff82c4?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=c07a7d4b86698ba3f6373f6b18d06d74);
  background-size: cover;
  background-position: center;
  position: relative;
}
.image span {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #fff;
  display: block;
  position: absolute;
  top: 50%;
  margin-top: -10px;
}
.image span:first-child {
  left: 20px;
}
.image span:nth-child(2) {
  right: 20px;
}

如果您无法添加更多HTML元素，请删除<div class="image"> <div class="hole-wrapper"> <span></span> <span></span> </div> </div>及其中的所有内容，并将CSS更改为以下内容：

hole-wrapper