CSS/PHP - с использованием различных CSS для каждого PHP строку

Question

я отправил свой оригинальный вопрос некоторое время назад, назад здесь:

CSS/PHP - Overlaying an Image with Hover and If Statements

С тех пор, я сосредоточил свой главный вопрос, и теперь осталось с еще одним. Код, который возвращает сервер выглядит следующим образом:

<?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 должны быть выполнены?

Спасибо!

Answer 1

Удалить изображение, соответствующее CSS, например. фон из класса сервера. Назначьте конкретный CSS идентификатору изображений.

Answer 2

.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; 
} 
... 

Answer 3

Если вы хотите добавить конкретные 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; ?>);"> 

Edit: Вы можете удалить все символы без слов из 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.