对多个元素应用相同的CSS，但稍作更改

Question

我目前正在使用以下CSS更改div的背景图像

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

这是正确的，但是，我有6个不同的div(命名为portfolio-1，portfolio-2，portfolio-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>

​