如何使用css创建带有状态圈的圈子头像？ [关闭]答案

【问题标题】：How to create circle avatar with a status circle using css? [closed]如何使用css创建带有状态圈的圈子头像？ [关闭]
【发布时间】：2021-11-08 10:49:51
【问题描述】：

我要创建一个像这张图片一样的头像。我怎么能用css做到这一点？ avatar with a status circle

【问题讨论】：

你应该添加minimal reproducible code
请添加您当前的状态。比如说你添加了一个图像集宽度、高度，但它不是四舍五入的。所以给出最少的代码

标签： html css

【解决方案1】：

试试这个

HTML

<img src="path_to/image" style="border-radius: 50%; width: 50px; height: 50px; border-width: 2%; border-style: solid; border-color: grey; ">
<span style="height: 12px; width: 12px; background-color: #bbb; border-radius: 50%; display:inline-grid; top: 0px;"></span>

【讨论】：

红色状态圈在哪里？
也没有边框

【解决方案2】：

你可以这样做：

.img-circle-small {
      width: 53px;
      height:55px;
      border-top-left-radius: 50% 50%;
      border-top-right-radius: 50% 50%;
      border-bottom-right-radius: 50% 50%;
      border-bottom-left-radius: 50% 50%;
      border: 2px solid #CCC;
      margin-bottom: 2px;
    }
  
  .status{
      width: 16px;
      height:16px;
      border-top-left-radius: 50% 50%;
      border-top-right-radius: 50% 50%;
      border-bottom-right-radius: 50% 50%;
      border-bottom-left-radius: 50% 50%;
      border: 2px solid #CCC;
      margin-bottom: 2px;
      background-color: green;

      position: absolute;

    }

  .temp{
    position: relative;
    display: inline-block;
  }
  .topRight{
     top: 0;
     right: 0;
  }

<div class="temp">
  <img src="https://www.pngitem.com/pimgs/m/206-2067982_thinking-boy-clipart-and-cliparts-for-free-transparent.png" alt="avatar" class="img-circle-small">
  <span class="status topRight">&nbsp</span>
</div>

【讨论】：

【解决方案3】：

“border-radius”属性是您想要使图像成为圆形的属性。

像这样：

 #circleProfilePicture
    {
    width:175px;
    height:175px;
    position:absolute;
    overflow:hidden;
    border-radius:50%;
    }

对于状态圈，我假设您想要一个常规的圈元素，您可以根据某些用户状态更改颜色？

您需要一种方法来检查状态并生成不同的页面/更改元素背景（如果这一切都在客户端完成，请使用 JavaScript）。

var userStatus = "online";
var circ = document.getElementById( 'div_IWantToChangeColorOf' );

if(userStatus == "online"){
circ.style.backgroundColor = 'green';
} else
{
circ.style.backgroundColor = 'red';
}

如果这更有意义，例如根据服务器的登录状态，您将需要一种服务器端语言来生成具有适当元素颜色的页面。

在 PHP 中，您可以执行以下操作来设置颜色： PHP: Change color of text based on $value

然后使用您根据用户状态确定的颜色值生成适当的页面（带有修改的色圈）发送给用户。

因此，使用border-radius 属性使图像成为一个圆形，并在其上创建一个圆形div。然后，一旦你弄清楚你在谈论什么“状态”，使用 Javascript（在客户端）或 PHP（在服务器上）更改颜色。

【讨论】：