html - CSS Circle Donut Chart 透明背景

Question

您好，我正在尝试在中心制作一个“圆环图”，如下所示:

这是使用以下代码显示的:

:root {
  --size: 90px;
  --bord: 20px;
}

.chart {
  width: var(--size);
  height: var(--size);
  margin: 1em auto;
  border-radius: 50%;
  background-image: conic-gradient(lightseagreen var(--value), lightgrey var(--value));
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.chart::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% - var(--bord));
  height: calc(100% - var(--bord));
  background: white;
  border-radius: inherit;
}

.x-60 {
  --value: 60%;
}

.x-20 {
  --value: 20%;
}

<div class="chart x-60">

</div>

我想将背景从“白色”变为透明，以便它在背景中显示木制图像，同时仍保留“边框”。

我如何实现这一点，因为将背景更改为无只会使“圆圈”成为饼图:

谢谢。

Answer 1

使用带有径向渐变的蒙版创建一个洞

:root {
  --size: 80px;
  --bord: 10px;
}

.chart {
  width: var(--size);
  height: var(--size);
  margin: 1em auto;
  border-radius: 50%;
  background: conic-gradient(lightseagreen var(--value), lightgrey var(--value));
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - var(--bord)),#fff calc(100% - var(--bord) + 1px));
          mask:radial-gradient(farthest-side,transparent calc(100% - var(--bord)),#fff calc(100% - var(--bord) + 1px));
}

.x-60 {
  --value: 60%;
}

.x-20 {
  --value: 20%;
}

body {
  background:linear-gradient(to right,yellow,blue);
}

<div class="chart x-60">

</div>