Question

我出现黑色文字而不是我希望出现的彩色文字。我使用Chrome作为浏览器。以下是不起作用的行：

<ul class="line-legend">
  <li>
    <span style="background-color:rgba(220,0,0,1)">
    </span>
    one
  </li>
  <li>
    <span style="background-color:rgba(0,0,220,1)">
    </span>
    two
  </li>
</ul>

以下是它的显示方式：

一个

2

我对HTML很新。

谢谢。

Answer 1

你的文字在span内，一个好的缩进应该可以帮助你识别出类似的事情。
将其更改为以下内容：

<ul class="line-legend">
    <li>
        <span style="background-color: rgba(220,0,0,1)">one</span>
    </li>
    <li>
        <span style="background-color:rgba(0,0,220,1)">two</span>
    </li>
</ul>

Answer 2

使用此功能在span

内写下您的文字

<ul class="line-legend"><li><span style="background-color:rgba(220,0,0,1); ">one</span></li><li><span style="background-color:rgba(0,0,220,1)">two</span></li></ul>

DEMO

Answer 3

看起来您正在使用span，因此您需要不同的颜色用于列表样式和文本颜色，因此可以使用此解决方案

您可以使用pseudo css来设置不会影响li样式的列表样式，并且可以为li提供任何样式，就像我已经完成的那样

我已将列表样式颜色更改为green，将背景更改为不同颜色的

JS Fiddle

＆＃13;

ul.line-legend {
  list-style: none;
}
.line-legend li {
  position: relative;
}
.line-legend li:before {
  content: "\2022";
  color: green;
  font-size: 18px;
  top: 0;
  position: absolute;
  left: -19px
}
.red {
  background: red;
}
.blue {
  background: blue;
}

＆＃13;

<ul class="line-legend">
  <li class="red">one</li>
  <li class="blue">two</li>
</ul>

＆＃13;

HTML文本背景颜色不适用于<span> </span>

3 个答案: