List numbers become translucent if I make the background translucent

Question

I've been fighting a problem with a reveal.js presentation for months now, on and off. What happens is that if I make the background for my slide content translucent, then ol numbers, but not ul bullets, nor any other element that I can see, also become translucent to the same degree.

The over-arching question is how are list numbers styled? With the secondary question being, how could the color of the list numbers be tied to the background in this way?

I have scoured the reveal CSS (and there's a fair amount of it) to no avail. And, of course, I've inspected the elements involved in the browser tools. A big part of the problem is that I have no idea how to achieve such an effect deliberately; these are just stock HTML lists with stock CSS styling -- no funny business with content in CSS, etc.

Notice how the numbers are nearly invisible in the second image. As I vary the background color translucency, the translucency of the numbers varies with it.

The background is a single fixed div:

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

With pretty straight-forward styling:

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

Answer 1

Instead of going through the hassle of finding these you could just add custom ones. These you can even style like you want.

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>