CSS圈甜甜圈图透明背景 [英] CSS Circle Donut Chart Transparent Background

问题描述

我正尝试在中间制作一个看起来如下的甜甜圈图":

Hi I am attempting to make a 'donut chart' in the center that looks the following:

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

This is displayed using the following code:

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

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

I want to make the background from 'white' to transparent so it shows the wooden image in the background whilst still retaining the 'border'.

如何实现此目的，因为将背景更改为无会简单地使圆圈"成为饼图:

How do I achieve this as changing the background to none simply makes the 'circle' a pie chart:

谢谢.

推荐答案

使用具有径向渐变的蒙版创建孔

Use mask with a radial-gradient to create a hole

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

这篇关于CSS圈甜甜圈图透明背景的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！