Html 如何使用不同的不透明度使3个圆圈彼此相交

嘿，伙计们，我得在另一个里面绕三圈。这是我设法得到的结果（我使用的是bootstrap4）。正如你在下面看到的，我得到了3个省略号，可能是因为我必须为3个圆使用绝对位置和相对位置，因为它们有相同的颜色，但不透明度不同。如果可能的话，我希望它是响应。

div.container{
背景图片：url（“../../../assets/sfondi/iStock-612391600_1500px.jpg”）；
背景尺寸：封面；
宽度：100%；
高度：自动；
保证金：自动；
填充：15px；
}
分区外阴影{
边界半径：50%；
背景色：#edfbfb；
身高：100%；
宽度：100%；
位置：绝对位置；
不透明度：0.3；
}
分区内阴影{
边界半径：50%；
背景色：#edfbfb；
高度：计算（100%-30px）；
宽度：计算（100%-30px）；
位置：绝对位置；
顶部：15px；
左：30px；
不透明度：0.6；
}
分割环{
背景色：#edfbfb；
边界半径：50%；
高度：计算（100%-60px）；
宽度：计算（100%-60px）；
位置：相对位置；
顶部：30px；
左：45像素；
填充：15%；
}
分区环分区行分区col-md-6{
显示：内联块；
保证金：自动；
}
img{
宽度：100%；
高度：自动；
最小宽度：30%；
}
.font{
字体系列：“Bree Rg”，无衬线；
}
跨度{
颜色：#0c49a2；
}
span.text-center{
填充：0 15px；
}

一些文字，一些文字，一些文字，一些文字
其他文本，其他文本，其他文本

您可以使用多框阴影插入褪色的圆圈

正文{
背景色：青色！重要；
填充：100px；
}
.圆圈{
位置：相对位置；
/*只是为了集中内部内容*/
显示器：flex；
证明内容：中心；
对齐项目：居中；
保证金：0自动；
/**********************************/
宽度：350px；
高度：350px；
背景：白色；
边界半径：50%；
/*您可以添加任意数量的框阴影*/
框阴影：0 0 0 px 13px rgba（255，255，255，0.50），0 0 0 px 25px rgba（255，255，255，0.50）；
}
.内部{
位置：相对位置；
}

文本文本文本
此处文本

您可以使用多框阴影插入褪色的圆圈

正文{
背景色：青色！重要；
填充：100px；
}
.圆圈{
位置：相对位置；
/*只是为了集中内部内容*/
显示器：flex；
证明内容：中心；
对齐项目：居中；
保证金：0自动；
/**********************************/
宽度：350px；
高度：350px；
背景：白色；
边界半径：50%；
/*您可以添加任意数量的框阴影*/
框阴影：0 0 0 px 13px rgba（255，255，255，0.50），0 0 0 px 25px rgba（255，255，255，0.50）；
}
.内部{
位置：相对位置；
}

文本文本文本
此处文本

您需要用几个

div

s来包装内容：

---

下面是一个示例：

您需要用几个

div

s来包装内容：

---

这里有一个示例：

@xdrm括号OP知道所有这些…你的评论并没有解决问题，@xdrm括号OP知道所有这些…你的评论并没有解决问题，我不知道这种框阴影的方法，不管怎样，使用你的css，我的所有内容都集中在圆圈内，一个挨着另一个，虽然我想让它像在问题中的图像，所以上面的文字和图像和描述below@Gabax现在检查我不知道这个盒子阴影的方法，不管怎样，你的css我所有的内容都集中在圆圈内，一个挨着另一个，而我希望它像问题中的图像一样，所以上面的文字和图片以及描述below@Gabax现在检查对不起，你的样品比我的差对不起，你的样品比我的差