0

しばらく前に元の問題を投稿しましたが、ここに戻ってきました。

CSS/PHP - Hover ステートメントと If ステートメントを使用した画像のオーバーレイ

それ以来、私は主な問題を修正しましたが、今はもう 1 つ残っています。サーバーを返すコードは次のようになります。

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

ご覧のとおり、これらのサーバーはすべて 1 つの 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 
.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 に答える
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 に答える
0

画像固有の CSS (背景など) をサーバー クラスから削除します。特定の CSS を画像の ID に割り当てます。

于 2013-03-19T21:27:03.630 に答える