Возможно ли это сделать с помощью внешнего CSS?

Question

Рассмотрим следующий пример :

HTML:

<div id="julia" class="photo"></div>
<div id="rachel" class="photo"></div>
<div id="martin" class="photo"></div>

CSS:

.photo {
    width: 60px;
    height: 60px;
    display: inline-block;
}
.photo:hover {
    background-position: -60px 0;
}
#julia {
    background-image: url('http://www.mypicx.com/uploadimg/1312875436_05012011_2.png');
}
#rachel {
    background-image: url('http://www.mypicx.com/uploadimg/1932001963_05012011_1.png');
}
#martin {
    background-image: url('http://www.mypicx.com/uploadimg/2082029375_05012011_3.png');
}

Этот пример демонстрирует, чего я хочу достичь,

HTML генерируется приложением Rails 3.Должны отображаться все пользователи в определенной группе (эта информация хранится в базе данных).Другими словами, список отображаемых пользователей может различаться.

Проблема в том, что я не хочу иметь этот код:

#username {
    background-image: url('/path/to/username/sprite');
}

для каждого существующего имени пользователя.Более того, если добавляется новый пользователь, я не хочу менять CSS.

Вопрос заключается в следующем: возможно ли достичь того же эффекта с использованием внешнего CSS ?

Answer 1

Просто вставьте атрибут стиля фонового изображения в каждом div:

<div style="background-image: url('http://www.mypicx.com/uploadimg/1312875436_05012011_2.png');" id="julia" class="photo"></div>
<div style="background-image: url('http://www.mypicx.com/uploadimg/1932001963_05012011_1.png');" id="rachel" class="photo"></div>
<div style="background-image: url('http://www.mypicx.com/uploadimg/2082029375_05012011_3.png');" id="martin" class="photo"></div>

Нет необходимости усложнять.

Answer 2

Если ваш внешний CSS-файл статичен, то, по-моему, это логически невозможно, поскольку информация URL-адреса является динамической.

РЕДАКТИРОВАТЬ : Если я правильно понимаю, ваша проблема не в том, чтобы заставить трюк зависания работать (потому что он работает ...), а в том, как установить background-image *Атрибут 1006 * для каждого элемента div (каждый раз разные значения - динамическая информация).

Таким образом, как и здесь, другие могут использовать динамический рендеринг страниц, таких как php, jsp и т. Д.

сказал, может быть, вы можете использовать динамический CSS-файл, который вы пишете на стороне сервера.(но это странно)

http://css -tricks.com / Можем ли мы предотвратить css-кэширование /

Answer 3

Что вы подразумеваете под внешним? Отдельный файл или файл css полностью загружен с другого компьютера?

Насколько мне известно, единственный способ для этих изображений изменить, если вы установите его (динамический) для каждого пользователя. Предполагая, что пути к их фотографиям хранятся в базе данных, вы можете использовать php или другой динамический язык для встраивания элемента img с динамическим src в шаблон HTML.

Пример:

<?php
function getUserImage(){
 //code to get img path from database
 return result;
}
?>
<img src="<?php print getUserImage(); ?>" alt="" />

В зависимости от того, кто вошел в систему, изображение будет меняться в зависимости от идентификатора пользователя из базы данных.

Answer 4

Вы можете переместить изображение в HTML-код, а затем CSS может применить тег наведения к изображению так же, как вы его настроили.

Трудно проверить, потому что хост изображения не любит хотлинкинг. Взгляните сюда поиграл

HTML

    <div id="julia" class="photo"><img src="http://www.mypicx.com/uploadimg/1312875436_05012011_2.png"/></div>
<div id="rachel" class="photo"><img src="http://www.mypicx.com/uploadimg/1932001963_05012011_1.png"/></div>
<div id="martin" class="photo"><img src="http://www.mypicx.com/uploadimg/2082029375_05012011_3.png"/></div>

CSS

.photo img {
     width: 60px;
    height: 60px;
    display: inline-block;
}
.photo img:hover {
     background-position: -60px 0;
}