从部分背景中切出一个半圆并在其后面显示背景[重复]答案

【问题标题】：Cutting out a semi-circle out of a Section Background and showing a background behind it [duplicate]从部分背景中切出一个半圆并在其后面显示背景[重复]
【发布时间】：2021-02-06 04:51:33
【问题描述】：

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

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

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

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

Click Here to View Example Image

【问题讨论】：

标签： javascript css canvas image-masking

【解决方案1】：

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

两个外部<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>

【讨论】：

我猜我做的截图没有说清楚，但是每个部分都有一个背景图片。不是纯色背景色，甚至不是渐变色。
你是说你不知道怎么把图片放在一个div里作为背景？
不，我是说一旦你为两个 div 添加了背景，透明的洞就会消失。
我想我可以将背景应用于两个 div 并调整一个带封面的背景大小，并使用 javascript 来匹配圆圈上背景的大小。让我试试看。
这是一个带有背景图像的示例。让你的图片适合你，但这与相同的 CSS 完全相同，只是将背景颜色更改为背景图片。