在用 css 制作的圆圈内添加图像答案

【问题标题】：Add an image inside a circle made with css在用 css 制作的圆圈内添加图像
【发布时间】：2022-08-02 21:53:59
【问题描述】：

我正在尝试在用 css 构建的圆圈内添加图像。我想我可以正确上传图像，但图像的可视化存在问题，如下所示。我还尝试将我想要使用的图像导出为相同大小的圆圈，但该解决方案无法正常工作。

HTML：

<div class=\"grid\">
  <div class=\"cell\">
    <div class=\"inner\">
      <div class=\"circle\"><img src=\"{image2}\"></div>
      <div class=\"caption\">
        <h3>Chiara Bersani <br> Marta Montanini</h3>
      </div>        
    </div>
  </div>

CSS：

* {
  box-sizing: border-box; margin: 0; padding: 0;
}

.grid {
  display: flex;
  flex-wrap: wrap;
  max-width: 960px;
  width: 90%;
  margin: auto;
}

.cell {
  flex-basis: 33.3%;
  display: flex;
  justify-content: center;
  align-items: center;

}
.cell:before {
  padding-bottom: 100%;
  display: block;
  content: \'\';
}

.circle {
  border-radius: 50%;
  width: 150px;
  height: 150px;
  margin: 0 auto 1em;
  box-shadow:0px 0px 15px 0px;
}

.circle img{
    width: 100%;
    height: auto;
    position: relative;
    top: 50%;
    transform: translate(0%, -50%);
}

布局实际上有 12 个圆圈，每个圆圈里面都有不同的图像，所以我不能在 css 部分使用背景图像来做到这一点（我也尝试过，但即使那个解决方案也不起作用）

您可以尝试将图片网址嵌入为背景图片网址，如下所示： <div class=\"circle\" stlye=\"background-image: url({image2})\"></div> 并设置样式圆形类的背景值

标签： html css image

【解决方案1】：

您可以通过 CSS 放置图像，但不能放在外部样式表中。

而不是这个：

<div class="circle"><img src="{image2}"></div>

做这个：

<div class="circle" style="background-image:url('{image2}')"></div>

【讨论】：