放置一个绿点或红点来显示用户在线与否

Question

我有以下代码来显示用户的图像。但我想用绿色点来区分图像外观，显示用户在线，橙色显示用户已被看到（例如 15 分钟前），红色显示用户离线。使用 CSS。

现在代码简而言之

//Get timing details
//get image details
//get user details

while($row = mysql_fetch_assoc($result)) {

  if($user_online){
    //show user modified image using CSS
    //image with green dot on it

  }else if($user_was_last_seen_15) {
    //show user modified image using CSS
    //image with orange dot on it

  }else {
    //show user modified image using CSS
    //image with red dot on it
  }

}

Answer 1

答案直接在这个页面的代码中的接缝实际上看看右上角，你会在你的个人资料图片旁边看到一些与你的目标非常相似的东西

这是一堆代码：

.logged-in {
  color: green;
}

.logged-out {
  color: red;
}

<span class="logged-in">?</span>
<span class="logged-out">?</span>

为了有用，我让你在你的用例中实现它，

干杯

Answer 2

我将向图像的容器添加一个类（.status在下面的示例中）以指示状态（在线/离线）。然后，您可以在容器中添加一个空元素（固定或使用 JavaScript）并使用它来显示点：

\n\n

.container {\n  position: relative;\n}\n.container .status {\n  position: absolute;\n  top: 0;    // position you want\n  left: 0:   // position you want\n}\n.container.offline .status {\n  background: url(/your/dot/image/offline);\n}\n.container.online .status {\n  background: url(/your/dot/image/online);\n}\n

\n\n

该代码可能不完整（您可能需要一个z-index），但它\xc2\xb4s是一个开始。另请注意，您不需要\xc2\xb4t 类.container，这只是为了指示父元素，而我只使用了 2 个状态而不是 3 个。

\n