如果我将背景设为半透明，列表编号将变为半透明

Question

几个月来，我一直在与 reveal.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;
    }

Answer 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>

Answer 2

考虑像这样的有序列表和无序列表-

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

要在 <ol> 标签内设置列表项的样式，您需要使用-

ol li{...}

这将设置任何 li 标签的样式，它是 ol 标签的后代。

但是如果你希望所有的 li 项目都是相同的颜色（比如黑色），

li{...}

即使这样也足够了，因为归根结底，它们都是列表项。

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

既然没有snippet，想什么理由也无用

如果我将背景设为半透明，列表编号将变为半透明

List numbers become translucent if I make the background translucent

css

firefox

reveal.js