CSS 圆形甜甜圈图透明背景

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 {&nbsp; --size: 80px;&nbsp; --bord: 10px;}.chart {&nbsp; width: var(--size);&nbsp; height: var(--size);&nbsp; margin: 1em auto;&nbsp; border-radius: 50%;&nbsp; background: conic-gradient(lightseagreen var(--value), lightgrey var(--value));&nbsp; -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - var(--bord)),#fff calc(100% - var(--bord) + 1px));&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; mask:radial-gradient(farthest-side,transparent calc(100% - var(--bord)),#fff calc(100% - var(--bord) + 1px));}.x-60 {&nbsp; --value: 60%;}.x-20 {&nbsp; --value: 20%;}body {&nbsp; background:linear-gradient(to right,yellow,blue);}<div class="chart x-60"></div>