css - 剪辑路径插入圆圈？

Question

是否可以创建一个插入的圆形剪辑路径，以便剪辑路径可以有效地在中心的 div 上切一个洞，而不是只显示中心？

div 应该全部显示出来，除了在中心切出一个洞来创建这样的东西:

我想使用剪辑路径或类似的东西，这样我就可以在 div 后面放置东西(图像和内容)，剪辑路径将用于显示它。因此，div(我的 jsfiddle 中的蓝色 div)将从中心消失，使用过渡来显示其背后的内容。

div {
  background: blue;
  width: 200px;
  height: 200px;
  -webkit-clip-path: circle(50px at center);
}

<div></div>

https://jsfiddle.net/pm4yvbxn/

Answer 1

我不认为你可以用 clip-path 实现这个但你当然可以在 div 上切一个洞使用 radial-gradient背景图像。这比 clip-path 有更好的浏览器支持。也是。

注意:此方法(和 box-shadow )仅在覆盖下方内容的元素具有彩色填充时才有效。如果不是 sandybrown颜色，上面需要有另一个图像，那么这些方法将不起作用，因为它们实际上切一个洞，它们只是模仿那种效果。

.div-with-hole {
  height: 100vh;
  background: radial-gradient(circle at center, transparent 25%, sandybrown 25.5%);
  background-size: 100% 100%;
  background-position: 50% 50%;
  transition: all 2s ease;
}
.div-with-hole:hover {
  background-size: 400% 400%; /* should be 100% * (100 / transparent % of radial gradient */
}
body {
  background: url(http://lorempixel.com/800/800/nature/1);
  min-height: 100vh;
  margin: 0;
  padding: 0;
}

<div class='div-with-hole'></div>