html - 如何用中间的文字和图像作为圆圈的背景绘制圆圈？

Question

我想知道如何画一个中间有文字、背景为图片的圆圈？

这张图片应该是圆圈的背景

我试过放图片，但没有得到完整的背景图片，只能得到一部分图片作为背景。

#circle {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  font-size: 50px;
  color: #2098D1;
  line-height: 200px;
  text-align: center;
  background-image: url("http://7bna.net/images/background-wallpapers/background-wallpapers-9.jpg");
}

<div id="circle"> Hello </div>

www.intrawallpaper.com/static/images/abstract-mosaic-background.png

Answer 1

#circle {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  font-size: 50px;
  color: #2098D1;
  line-height: 200px;
  text-align: center;
  background-image: url("http://intrawallpaper.com/static/images/abstract-mosaic-background.png");
  background-size: 150% 150%;
  background-repeat: no-repeat;
  background-position: 97% 75%;
}

<div id="circle"> Hello </div>

可以使用background-position调整背景显示区域。

了解更多 here .

或者，您可以将 background-size: contain 与 background-position: center 结合使用。