从部分背景中切出一个半圆并在其后面显示背景

Question

除了使用透明的 png 之外，我一直在努力寻找最好的方法。

我正在构建的网站的设计者将这些圆圈从网站的每个部分中删除，作为整体主题的一部分。我喜欢它的外观，但以自动发生的方式实现它并不明显。

我尝试了一些 SVG 遮罩，但它不会显示背后的背景。理想情况下，这些图像可以由网站编辑器替换，而不必从每张图像中删除这一部分。是否有 css、javascript 或 canvas 方法来实现我的想法？

此外，每个部分都有背景图片。不仅仅是纯色和渐变。

Click Here to View Example Image

Answer 1

CSS 是包装元素内三个 <div> 的直接定位（在本例中为 <section>

两个 outer <div>s 是 bars，而内部 div 创造了错觉半圆。这只需提供两倍于其宽度的边框半径即可完成。

“圆圈”居中并设置 z-index 后，您就有了解决方案。

我把箭头放入圆圈由你决定。

section {
  z-index: 50;
  position: relative;
  width: 100vw;
  height: 250px;
}

div {
  z-index: 25;
  position: absolute;
  height: 50%;
  width: 100%;
}
div:nth-child(1) {
 background-image: url(https://via.placeholder.com/160?text=TOP);
 }

div:nth-child(2) {
 background-image: url(https://via.placeholder.com/160/0000FF?text=CENTER);
 background-position: center;
  z-index: 999;
  top: 75px;
  left: calc((100vw/2) - 50px);
  width: 100px;
  height: 100px;
  border-radius: 200px;
}

div:nth-child(3) {
 background-image: url(https://via.placeholder.com/160/FF0000/FFFFFF?text=BOTTOM);
  bottom: 0;
  border: 1px solid black;
}

<section>
  <div></div>
  <div></div>
  <div></div>
</section>

从部分背景中切出一个半圆并在其后面显示背景

Cutting out a semi-circle out of a Section Background and showing a background behind it

javascript

css

canvas

image-masking