Применение того же CSS с небольшими изменениями к нескольким элементам

Question

В настоящее время я изменяю фоновое изображение div с помощью следующего CSS

        #portfolio-1 {
        background:
        url(images/portfolio-1.jpg);
        background-size: 100% 100%;
    }

Это работает правильно, однако у меня есть 6 различных div (названных портфолио-1, портфолио-2, портфолио-3 ..) и нужно также установить их фоновое изображение.Есть ли более простой способ применить фоновое изображение ко всем из них (с другим именем файла) без необходимости делать каждое из них по отдельности?

Answer 1

Используйте переменную CSS, и вы можете сделать это с помощью встроенного CSS:

.portfolio {
  width:200px;
  height:100px;
  background:var(--img) center/100% 100% no-repeat;
}

<div class="portfolio" style="--img:url(https://picsum.photos/200/300?image=0)"></div>
<div class="portfolio" style="--img:url(https://picsum.photos/200/300?image=1069)"></div>
<div class="portfolio" style="--img:url(https://picsum.photos/200/300?image=1050)"></div>
<div class="portfolio" style="--img:url(https://picsum.photos/200/300?image=1048)"></div>