Question

我一直在用reveal.js演示文稿解决问题几个月了，现在，打开和关闭。如果我将幻灯片内容的背景设置为半透明，那么ol数字，但不是ul项目符号，以及我能看到的任何其他元素，也会变得半透明到相同的程度。< / p>

最重要的问题是列表编号是如何设计的？第二个问题是，列表编号的颜色如何以这种方式与背景相关联？

我已经仔细研究了显示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;
    }

Answer 1

而不是经历找到这些的麻烦，你可以添加自定义的。这些你甚至可以像你想要的那样。

＆＃13;

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

＆＃13;

<div class="background">
  <ol>
    <li>element</li>
    <li>element</li>
    <li>element</li>
  </ol>
<div>

＆＃13;

Answer 2

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

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

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

ol li{...}

这样可以设置任何li标记，该标记是ol标记的后代。

但如果你想让所有礼品颜色相同（比如黑色），

li{...}

即使这样就足够了，因为最终所有这些都是列表项。

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

因为没有代码片段，所以想到任何理由都是没用的。

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

2 个答案: