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>

我希望将背景从“白色”改为透明，这样可以在保留“边框”的同时显示背景中的木质图像。

如何实现这一点？将背景更改为“无”只会使“圆形”成为饼图： 谢谢。

- Zack Antony Bucci

---

@tomerpacific .chart::after { .chart::after { content: ""; display: block; clear: both; } } - Zack Antony Bucci

有没有不使用 JavaScript 的理由？ - user13103325

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>

- Temani Afif

---

伙计，你好。有没有办法我可以使用关键帧在页面加载时使边框动画化？ - Zack Antony Bucci

@ZackAntonyBucci 给锥形渐变添加动画效果？ - Temani Afif

是的。或者换句话说，就是“边框”。 - Zack Antony Bucci

@ZackAntonyBucci，根据你目前的代码，这会很困难。我们需要对其进行更改，但这将使答案与你实际问题无关。你可以提出另一个问题来询问动画部分，或者编辑此问题以包含动画部分（但最好提出另一个问题以保持问题的焦点）。 - Temani Afif

谢谢您的帮助。如果我想要更改条形图的颜色，我可以通过在JavaScript中针对.chart进行设置来轻松实现，例如：$(chart).css("background", "background: conic-gradient(COLOR1 var(--value), COLOR2 var(--value))"); - Zack Antony Bucci

@ZackAntonyBucci 可以使用 CSS 变量来完成，就像你用百分比一样。相关链接：https://dev59.com/J2445IYBdhLWcg3wGWd7#49618941 - Temani Afif