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;
}
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With