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

这是工作小提琴链接： 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阅读或谷歌搜索。

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

＆＃13;

#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%;
}

＆＃13;

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

＆＃13;

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

详细了解here。

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

如何在中间绘制带有文本的圆圈，将图像作为圆圈的背景绘制？

4 个答案:

背景大小调整