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 {

  --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>