Question

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

现在在nutsell中的代码

//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

有一个div环绕图像并在其上放一个类，比如说

<div class="user-avatar">
  <img src="users-avatar-here.jpg" />
  <!-- if else statement here -->
  <img src="green.jpg" class="status" />
  <!-- else -->
  <img src="red.jpg" class="status" />
</div>

然后在你的CSS中：

.user-avatar {
  position: relative
}

.status {
  position: absolute;
  right: 10px;
  bottom: 10px;
}

Answer 3

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

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

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

Answer 4

用油漆修改2张图片并在每张图片上放置绿点和红点，然后在用户上线时使用greendot图像，在用户离线时使用红点图像

设置绿点或红点以显示用户是否在线

4 个答案: