本文介绍了CSS圈甜甜圈图透明背景的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正尝试在中间制作一个看起来如下的甜甜圈图":
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圈甜甜圈图透明背景的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!