CSS设置关于类选择器的背景图像答案

【问题标题】：CSS set background image regarding class selectorCSS设置关于类选择器的背景图像
【发布时间】：2018-10-26 16:17:25
【问题描述】：

我想设置一个关于其类的 div 的背景图像。我正在开发的网站应该显示一组游戏卡。每张卡片都包含在一个 div 中，并且有一个这样的类：

<div class="card value suit>
</div>

分别是花色和价值，例如俱乐部和五个。例如，对于这样的 div 容器：

<div class="card seven clubs>
</div>

我想知道是否有办法通过 CSS 将其背景图像设置为该属性，而无需为每张卡片编写此属性：

.card.seven.clubs {
    background-image:  url("../../images/seven_clubs.png");
}

【问题讨论】：

你应该看看 SCSS 和它的变量。也看看这个问题：stackoverflow.com/questions/39518374/scss-variable-class-name
无论如何，否。 SCSS 仍将输出相同的 CSS。 SCSS 只是让编写变得更容易。
我建议你看看stackoverflow.com/questions/15734546/…，使用像<div class="card" value="07" suit="clubs">这样的html属性然后在cssbackground: url("../../images/" attr(value) "_" attr(suit) ".png");中，但我认为你最好在内联css中设置背景@ 987654328@
背景：url("../../images/" attr(value) "_" attr(suit) ".png");这确实不起作用不是吗？

标签： html css web

【解决方案1】：

你不能真的只有 css 的 dinamy 类，你需要某种形式或预编译器，如 SASS 来转换像

for every number do {
  generate number properties
}
for every suite do {
  generate suite css properties
}

以

的形式转换为实际的css代码

.suite1{
  property: value;
}
.suite2{
  property:value
}
.number1{
  property:value
}

或者您可以使用 Javascript 并在其上动态设置样式

var cards = document.getElementsByClassName('card');
for (var i = 0; i++; i < cards.length){
  var thisElementClasses = cards[i].classList;
  let imageUrl = '../../images/'+thisElementClasses[0]+'_'+'thisElementClasses[1]'+'.png';
  card[i].style.backgroundImage = imageUrl;
}

【讨论】：