0

我不久前发布了我的原始问题，回到这里：

CSS/PHP - 用 Hover 和 If 语句覆盖图像

从那时起，我已经解决了我的主要问题，现在还剩下一个。返回服务器的代码如下所示：

<?php 
  foreach($servers as $server): 

  $stats = \Minecraft\Stats::retrieve(new \Minecraft\Server($server)); 
?>
<center>
  <pre>
    <div class="server">
      <div class="overlay"></div>
      <div class="<?php echo($stats->is_online) ? 'online' : 'offline'; ?>"></div>
      <div class="numbers"><?php printf('%u/%u', $stats->online_players, $stats->max_players); ?></div>         
    </div>
  </pre>
</center>

如您所见，所有这些服务器都属于一个 CSS“服务器”类。这造成了问题，因为我需要返回的每台服务器都有不同的图像。

这是服务器类的 CSS：

.server {
    background: url('img/servers/hg.png') center no-repeat;
    width:  330px;
    height: 280px;
    overflow: hidden;
    position: relative;
 }
.server:hover { 
    background: url('img/servers/hg-hover.png') center no-repeat;
 }

如何选择单个服务器，或列出要执行的 CSS？

谢谢！

4

3 回答 3

1

如果要为每个服务器添加特定的 css，可以添加一个额外的类：

<div class="server background_image_class_<?php echo $server->ID; ?>">
                                                    ^^^^^^^^^^^^ some variable that uniquely identifies the server.

如果您将图像存储在与服务器信息相同的数据库中，您还可以使用内联 css：

<div class="server" style="background-image: url(<?php echo $server->backgroundImage; ?>);">

编辑：您可以从服务器 url 中删除所有非单词字符并将其用作类名：

<div class="server <?php echo  preg_replace("/[^\w]/", "", $server); ?>">

现在您可以在您的 css 中使用修改后的服务器名称：

.server {
  // general styles
  background-repeat: no-repeat;
  // etc.
}
.hg1playminezoneco {
  // image background form this specific server
  background-image: url(/path/to/hg1playminezoneco.png);
}
.hg1playminezoneco:hover {
  // image background form this specific server on hover
  background-image: url(/path/to/hg1playminezoneco-hover.png);
}
.pvpplayminezoneco {
  background-image: url(/path/to/pvpplayminezoneco.png);
}
.pvpplayminezoneco:hover {
  background-image: url(/path/to/pvpplayminezoneco-hover.png);
}
// etc.
于 2013-03-19T21:42:14.687 回答
1 
.server:nth-child(1) {
    background: url('img/servers/hg1.png') center no-repeat;
}
.server:nth-child(2) {
    background: url('img/servers/hg2.png') center no-repeat;
}
.server:nth-child(3) {
    background: url('img/servers/hg3.png') center no-repeat;
}
...
于 2013-03-19T21:33:18.510 回答
0

从服务器类中删除图像特定的 CSS，例如背景。将特定的 CSS 分配给图像的 ID。

于 2013-03-19T21:27:03.630 回答