Номера списков становятся полупрозрачными, если я делаю фоновый полупрозрачный

Я уже несколько месяцев борюсь с проблемой show.js, включаю и выключаю. Случается, что если я сделаю фон для моего содержимого слайда полупрозрачным, тогда ol номера, но не ul, а также любой другой элемент, который я могу видеть, также становятся полупрозрачными в той же степени.

Сложный вопрос: как стилируются номера списков? Что касается вторичного вопроса, каким образом цвет номеров списка будет привязан к фону таким образом?

Я просмотрел раскрывающийся CSS (и там его довольно много) безрезультатно. И, конечно же, я проверил элементы, связанные с инструментами браузера. Большая часть проблемы заключается в том, что я понятия не имею, как добиться такого эффекта сознательно; это всего лишь HTML-списки с запасом CSS-стиля - не забавный бизнес с контентом в CSS и т.д.

Обратите внимание, что во втором изображении цифры почти невидимы. Поскольку я изменяю прозрачность цвета фона, полупрозрачность чисел меняется с ним.

Фон - это один фиксированный div:

<div class="background"<% [WallpaperImage] %> style="background-image:url(<% WallpaperImage %>)"<% [/] %>></div>

С довольно прямолинейным дизайном:

body > div.background {
    background                          : fixed border-box #000 center/cover no-repeat;
    bottom                              : 0;
    left                                : 0;
    position                            : fixed;
    right                               : 0;
    top                                 : 0;
    }

Ответ 1

Вместо того, чтобы преодолевать трудности поиска, вы можете просто добавить свои собственные. Это вы даже можете стилизовать, как хотите.

body > div.background {
  background: url(https://upload.wikimedia.org/wikipedia/commons/thumb/1/13/NASA_Unveils_Celestial_Fireworks_as_Official_Hubble_25th_Anniversary_Image.jpg/800px-NASA_Unveils_Celestial_Fireworks_as_Official_Hubble_25th_Anniversary_Image.jpg) fixed border-box #000 center/cover no-repeat;
  bottom: 0;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
}
ol {
  list-style-type: none; /* This removes the old numbers */
  padding: 20px;
  border-radius: 6px;
  background: rgba(255,255,255,0.2);
  width: 300px;
  margin: 60px auto;
}

ol li {
  counter-increment: counter; /* This saves the values to counter */ 
  margin-bottom: 5px;
}
ol li::before {
  content: counter(counter); /* This applies counter to pseudo content */
  margin-right: 10px;
  font-size: 1em;
  color: black;
  font-weight: bold;
}

<div class="background">
  <ol>
    <li>element</li>
    <li>element</li>
    <li>element</li>
  </ol>
<div>

Ответ 2

Рассмотрим упорядоченный список и не упорядоченный список, подобный этому -

<ol>
    <li> something</li>
    <li> something</li>
</ol>
<ul>
    <li> something</li>
    <li> something</li>
</ul>

Чтобы создать элемент списка внутри тега <ol>, вам нужно использовать -

ol li{...}

Это приведет к стилю любого тега li, который является потомком тега ol.

Но если вы хотите, чтобы все элементы li имели один цвет (например, черный),

li{...}

Даже этого достаточно, потому что в конечном счете все они являются элементами списка.

Что касается вторичного вопроса, каким образом цвет номеров списка может быть привязан к фону таким образом?

Поскольку нет фрагмента, было бы бесполезно думать о каких-либо причинах.