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

【问题标题】：List numbers become translucent if I make the background translucent如果我使背景半透明，列表编号将变为半透明
【发布时间】：2016-09-04 07:03:28
【问题描述】：

几个月来，我一直在与一个reveal.js 演示文稿作斗争，时断时续。发生的情况是，如果我将幻灯片内容的背景设为半透明，那么 ol 数字，而不是 ul 项目符号，以及我能看到的任何其他元素，也会变成相同程度的半透明。

最重要的问题是列表编号的样式如何？第二个问题是，如何将列表编号的颜色以这种方式与背景联系起来？

我已经搜索了显示 CSS（并且有相当数量的）无济于事。而且，当然，我已经检查了浏览器工具中涉及的元素。很大一部分问题是我不知道如何刻意达到这样的效果；这些只是带有普通 CSS 样式的普通 HTML 列表——没有 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;
    }

【问题讨论】：

您能否制作一个包含背景 div 和列表容器的自包含示例，并且可以轻松地重新创建它的背景？
@misterManSam ：如果我能做到，我就解决了这个问题。 :-/ 我正在寻求关于在哪里寻找的帮助。
如果您可以添加构成上图的整个 sn-p 以及所有相关的 js/html/css，这将是一个好的开始，即使错误是零星的。目前我们没有足够的资源来尝试重新创建错误，我不确定我们是否可以指出目前在哪里查看。
@misterManSam ：“整个 sn-p”相当大。在接下来的几天里，我会尽量减少我的部分，但大部分代码都在reveal.js中。最后，如果有用的话，我可以重现一个依赖于reveal.js的sn-p。
@LawrenceDol 我实际上认为您可以替换自己的 ol li 并且它可能不会受到背景样式的影响。在这里试试这个：jsfiddle.net/73897e75/10

标签： css firefox reveal.js

【解决方案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>

【讨论】：

是的，经过大量研究，我得出结论，这是 Firefox 中的一个错误，他们似乎正在以他们通常的热情（也就是说，不是很快）解决这个错误。但是，如果它与我提到的分层错误（我认为是）有关，它可能会在 FF 50（或者可能是 49）中得到解决。同时，这是一个完全可行的替代方案。
@DeneaNovac：对不起；我真的很想给你赏金，因为你的评论和小提琴给了我一个可行的解决方案。但是如果没有发布答案，就无法做到这一点。 :-/

【解决方案2】：

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

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

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

ol li{...}

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

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

li{...}

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

第二个问题是，如何将列表编号的颜色以这种方式与背景联系起来？

既然没有sn-p，那再想什么理由也无济于事。

【讨论】：