如何为100个.class元素设置对应序号的背景图片？

纯CSS无法直接通过计数器动态拼接背景图片URL（因为CSS不支持在background-image这类属性中直接将计数器值与字符串拼接），你之前尝试的伪元素content属性仅用于生成文本内容，无法作用于背景图片的路径设置。

下面提供两种可行方案：

方案一：使用Sass（CSS预处理器）自动生成规则 #

如果你的项目允许使用预处理器，Sass的循环可以轻松生成100条样式规则：

@for $i from 1 through 100 {
  .class:nth-of-type(#{$i}) {
    background-image: url('background-img_#{$i}.svg');
    /* 可添加其他背景样式 */
    background-size: cover;
    background-repeat: no-repeat;
  }
}

编译后会生成100条类似下面的CSS规则：

.class:nth-of-type(1) {
  background-image: url('background-img_1.svg');
  background-size: cover;
  background-repeat: no-repeat;
}
.class:nth-of-type(2) {
  background-image: url('background-img_2.svg');
  background-size: cover;
  background-repeat: no-repeat;
}
/* ... 直到第100个元素 */

方案二：使用JavaScript动态设置 #

如果无法使用预处理器，JavaScript可以直接遍历元素并设置背景图片：

const elements = document.querySelectorAll('.class');
elements.forEach((el, index) => {
  const imgNum = index + 1; // 索引从0开始，需加1匹配图片编号
  el.style.backgroundImage = `url('background-img_${imgNum}.svg')`;
  // 可选：补充背景样式
  el.style.backgroundSize = 'cover';
  el.style.backgroundRepeat = 'no-repeat';
});

注意事项 #

• 确保所有background-img_*.svg文件的路径正确，与页面或CSS文件的相对路径匹配。
• 使用:nth-of-type选择器时，需保证这些.class元素是同一父元素下的同级元素，否则选择器可能无法正确匹配。

内容的提问来源于stack exchange，提问作者david