Różne obrazki w różnych divach

Question

Witam, udało mi się stworzyć efekt jaki chciałam, ale nie wiem teraz jak przerobić jeden fragment, abym nie musiała tworzyć dla każdego diva oddzielnego css-a. Dla każdego diva ma być przypisany inny obrazek, a divów będzie ponad 50. Jeśli chodzi o JS - nie umiem go, jestem dopiero początkująca i na tym etapie chciałabym próbować pisać kod z użyciem HTML i CSS. Próbowałam użyć style=" " zagnieżdżonego w <div class="s-member">, ale efekt wizualny się wykrzacza. Może jakieś rady?

http://codepen.io/kaczka162/pen/ggvoRb

Answer 1

Wiesz, myślę, że bez podstawowej wiedzy o js i programowaniu się nie obejdzie, żeby zrobić to szybko i sprawnie.

Answer 2

Witam. Myślę, że już jest za dużo kodu. Można zrobić to bez kombinacji.

Mój sposób

Potem tylko wystarczy dodawać kolejne divy o kolejnym numerze klasy i nazwie użytkownika, oraz w css kolejny .s-member-2,.s-member-3, itd z odpowiednim avatarem.

Answer 3

Możesz zrobić pętle w SCSS albo w JS. Zakładając że tego nie znasz to po prostu każdy div może mieć dwie klasy np:

<div class="circleBox one"></div>

<div class="circleBox two"></div>

...

Gdzie circleBox ma css'a z właściwościami wyglądu a w one zmieniasz tylko background.

Answer 4

Udało mi się poprzez wprowadzenie tagów <img> do divów :)