CODEWITHSUNDEEP
cssfirefoxreveal.js
L. Cornelius Dol
L. Cornelius Dol

Reputation: 64026

List numbers become translucent if I make the background translucent

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.

enter image description here enter image description here

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

Upvotes: 11

Views: 257

Answers (2)

user2940296
user2940296

Reputation: 153

Consider an ordered list and an un-ordered list like this-

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

To style the list item inside an <ol> tag, you need to use-

ol li{...}

This would style any li tag which is a descendent of ol tag.

But if you want all li items to be of same color(say black),

li{...}

Even this is sufficient, because ultimately, all of them are list items.

With the secondary question being, how could the color of the list numbers be tied to the background in this way?

Since, there is no snippet, it would rather be useless to think of any reasons.

Upvotes: 0

Rudi Urbanek
Rudi Urbanek

Reputation: 1943

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>

Upvotes: 5

Related Questions