html - css 中的图像数组并在 HTML 中检索

Question

我想为 3 个按钮使用一个类，但具有不同的 background-image ，以便每个按钮都有自己的图像。我想在 css 中声明一个背景图像数组，然后检索图像。然而根据我的研究，CSS 中没有数组声明。这是正确的吗？如果是，我必须采取什么替代方案来检索每个按钮的每个图像？

HTML

...
...
<button class="access_item">
        <span class="access_icon">
        </span>
         Button_1
</button>

<button class="access_item">
        <span class="access_icon">
        </span>
         Button_2
</button>

<button class="access_item">
        <span class="access_icon">
        </span>
         Button_3
</button>
...

CSS

.access_item {
  display: inline-block;
  background: none;
  border: 0;
  cursor: pointer;
  appearance: none; 
}

.access_icon {
  display: block;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-image: url("https://picsum.photos/id/237/200/300"); //Image 1
  background-image: url("https://picsum.photos/seed/picsum/200/300"); //Image 2
  background-image: url("https://picsum.photos/200/300/?blur"); //Image 3
  margin-bottom: 20px;

}

Answer 1

使用:nth-child()选择器。 CSS 代码将变为:

.access_item {
  display: inline-block;
  background: none;
  border: 0;
  cursor: pointer;
  appearance: none; 
}

.access_icon {
  display: block;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin-bottom: 20px;

}

.access_item:nth-child(1) > .access_icon {
  background-image: url("https://picsum.photos/id/237/200/300"); //Image 1
}

.access_item:nth-child(2) > .access_icon {
  background-image: url("https://picsum.photos/seed/picsum/200/300"); //Image 2
}

.access_item:nth-child(3) > .access_icon {
  background-image: url("https://picsum.photos/200/300/?blur"); //Image 3
}