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

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>

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

Answer 1

背景调整

添加适当的 background-size 即可获得您想要的结果。

#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-repeat: no-repeat;
  background-size: cover;
}

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

Answer 2

这里正在工作fiddlelink： https://jsfiddle.net/ash06229/jckyk3cr/

.circle {
  background: url(http://www.intrawallpaper.com/static/images/abstract-mosaic-background.png);
    background-size: cover;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    color: #000;
}

Answer 3

简单HTML/CSS。阅读 w3school 或 google 它。

HTML:

<div class="writeOver">
    Some Text
</div>

CSS:

.writeOver{
    width: 150px;
    height: 150px;
    border-radius: 50%;
    text-align: center;
    padding: 50px;
    background-image: url('/path/to/image/bg.png')
}

您可以相应地进行调整。

Answer 4

#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 结合使用。

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

how to draw circle with text in middle and an image as a background of the circle?

html

css

css-shapes

背景调整