如何通过CSS根据class批量为游戏卡牌div设置背景图片？

当然有办法解决这个重复代码的问题！你完全不用手动为每张卡牌编写单独的CSS规则，下面给你几个实用的方案，按需选择：

方案1：用CSS预处理器（Sass/LESS）自动生成规则（无需修改现有HTML） #

如果你正在使用Sass、LESS这类预处理器，这是最适合你的方案——只需要定义牌面数值和花色的列表，预处理器会自动帮你生成所有卡牌的CSS规则，完全不用手动重复编写。

示例（Sass）： #

// 定义所有牌面数值和花色
$card-values: ace, two, three, four, five, six, seven, eight, nine, ten, jack, queen, king;
$card-suits: clubs, diamonds, hearts, spades;

// 循环生成所有卡牌的背景图规则
@each $value in $card-values {
  @each $suit in $card-suits {
    .card.#{$value}.#{$suit} {
      background-image: url("../../images/#{$value}_#{$suit}.png");
      // 可以在这里统一设置卡牌的通用样式
      width: 120px;
      height: 170px;
      background-size: cover;
      border-radius: 8px;
    }
  }
}

编译后，预处理器会自动生成类似.card.seven.clubs { ... }的所有组合规则，你只需要维护上面的数值和花色列表即可。

方案2：使用CSS自定义属性（适合能修改HTML的场景） #

如果可以调整你的HTML结构，用CSS自定义属性（变量）来传递牌面和花色信息，只需要写一条通用的.card规则就能搞定所有卡牌。

示例： #

HTML部分：

<div class="card" style="--card-value: seven; --card-suit: clubs"></div>
<div class="card" style="--card-value: king; --card-suit: hearts"></div>

CSS部分：

.card {
  // 通用卡牌样式
  width: 120px;
  height: 170px;
  background-size: cover;
  border-radius: 8px;
  // 用变量拼接背景图URL
  background-image: url("../../images/" var(--card-value) "_" var(--card-suit) ".png");
}

这个方案的优势是完全不需要重复写CSS规则，HTML里直接指定对应的变量值即可，非常简洁易维护。

方案3：使用HTML data属性 + CSS attr()函数 #

和自定义属性类似，你也可以用HTML的data-*属性来存储牌面和花色信息，再通过CSS的attr()函数拼接背景图地址：

示例： #

HTML部分：

<div class="card" data-value="seven" data-suit="clubs"></div>
<div class="card" data-value="queen" data-suit="diamonds"></div>

CSS部分：

.card {
  width: 120px;
  height: 170px;
  background-size: cover;
  border-radius: 8px;
  background-image: url("../../images/" attr(data-value) "_" attr(data-suit) ".png");
}

注意：attr()函数在background-image中的支持已经覆盖了绝大多数现代浏览器，如果需要兼容非常老旧的浏览器，可能需要谨慎使用。

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