如何绘制以文本为中心的圆，并以图像作为圆的背景？

<div class="circle-container">
  <span class="text">文本内容</span>
</div>

.circle-container {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-image: url("背景图像的URL");
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.text {
  font-size: 16px;
  color: #ffffff;
  text-align: center;
}

const container = document.querySelector('.circle-container');
const text = document.querySelector('.text');

container.style.width = text.offsetWidth + 'px';
container.style.height = text.offsetHeight + 'px';