如何在 CSS 中将图像不透明度与第 nth-child 或 nth-of-type 结合使用？

Question

I posted this question yesterday and was referred to some other answers.

这些答案帮助我获得了我想要的不透明度显示的图像，这很好，但问题是我想要显示的下一张图像没有被选择（我想要一次鼓，而不是一次电吉他第二行):

.concert .details .bg-image:nth-of-type(8n+1) {
  position: absolute;
  z-index: -1;
  top: 0;
  right: 0;
  bottom: 0;
  background: url(drums.png) 66% 33%;
  opacity: 0.2;
  width: 33%;
  height: 100%;
}

.concert .details .bg-image:nth-of-type(8n+2) {
  position: absolute;
  z-index: -1;
  top: 0;
  right: 0;
  bottom: 0;
  background: url(electricguitar.png) 66% 33;
  opacity: 0.2;
  width: 33%;
  height: 100%;
}

<div class="concerts">
  {% for concert in concerts %}
  <div class="concert">
    <div class="date">
      <span class="day">{{ concert.date.day }}</span>
      <span class="month">{{ concert.date|date:'F' }}</span>
      <span class="year">{{ concert.date.year }}</span>
    </div>
    <div class="details">
      <div class="bg-image"></div>
      <span class="headliner">{{ concert.headliner }}</span>
      <span class="support">{{ concert.support }}</span>
      <span class="price">{{ concert.price }}</span>
      <span class="notes"> {{ concert.notes }}</span>
      <span class="concert_website">
                <a href="{{ concert.website }}" target="_blank">
                  Event Website &#9835;
                </a>
              </span>
    </div>
    <div class="venue">
      <span class="venue_name">
                <a href="{% url 'concerts:venue_events' slug=concert.venue.slug %}">
                  {{ concert.venue.name }}
                </a>
              </span>
      <span class="address">{{ concert.venue.address }}</span>
      <span class="venue_website">
                <a href="{{ concert.venue.website }}" target="_blank">
                  Venue Website &#9833;
                </a>
              </span>
    </div>
  </div>
  {% endfor %}
</div>

为什么第二行没有显示电吉他图片？我确定它与我的第 nth-of-type 选择器有关，并且我已经尝试了我能想到的第 nth-of-type 和 nth-child 的所有排列，但显然，我不理解某些东西。我做错了什么？

Answer 1

您需要将 nth-of-type 放在音乐会上（bg-image 始终是详细信息 div 的第一个 child）：

/* you can cut down your css by adding all shared styles to one class*/

.concert .details .bg-image {
  position: absolute;
  z-index: -1;
  top: 0;
  right: 0;
  bottom: 0;
  opacity: 0.2;
  width: 33%;
  height: 100%;
}

/* then you just change your backgrounds */
.concert:nth-of-type(8n+1) .details .bg-image {
  background: url(drums.png) 66% 33%;
}

.concert:nth-of-type(8n+2) .details .bg-image {
  background: url(electricguitar.png) 66% 33%;
}

如何在 CSS 中将图像不透明度与第 nth-child 或 nth-of-type 结合使用？

How use image opacity in combination with nth-child or nth-of-type in CSS?

css

image

css-selectors

opacity