Как написать такой CSS?

Question

[sitev_ru]

Вывожу с помощью html-кода в теги логин пользователя. В каталоге photos хранятся фотки пользователей. Как с помощью CSS отобразить фотографию пользователя?

Answer 1

[Сергей]

Если у вас сайт только на HTML, фотографию можно вывести через background для дива например, прописан уникальные классы для каждого элемента

Comments

[sitev_ru]

А если между тегами li вывожу логин пользователя: user1 Можно отобразить картинку типа /photos/user1.jpg ?

[Сергей]

нет, сделайте user1 и пропишите нужные стили

[Сергей]

Хотя можете, если сделаете на JQuery

[Сергей]

Нужно после загрузки страницы прочитать текст в li и добавить img например или тотже беграунд в style

[Андрей Б.]

делать на клиентской стороне можно, но это не правильно, скрипты исполняются дольше чем css

[sitev_ru]

я и говорю про серверную часть, про CSS

[Сергей]

sitev_ru: css не серверная часть, это фронтовая. Серверная это PHP, Python и тп

[sitev_ru]

ну да да.... можно вывести так: [li][img src="/photos/user1.jpg"][/li] а если не использовать тег img? HTML [li]user1[/li] оставим... какой должен быть CSS?

[Сергей]

[li style="background: url('/images/photo/user1.jpg') no-repeat 0 0;"] это раз. Во вторым в самих стилях нужно li сделать display: block; height: высота_фото**px; padding-left: ширина_картинки_плюс_еще_несколько

Answer 2

[AngReload]

Усли очень хочется на CSS, то вот так:
HTML
<li class='user-image' name="vasya_pupkin"></li>

CSS

.user-image
{
    content: attr(name);
    background-image: url('/photos/'attr(name)'.png');
}

Но это эпическое зло.

Лучше уж так:
HTML

<li style="background: url(/photos/vasya_pupkin.png);">vasya_pupkin</li>