Question

我想设置关于其类的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");
}

Answer 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;
}

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

1 个答案: