CSS用水平填充水平菜单栏

Question

我正在使用列表创建一个水平菜单栏，但是我很难填充它会变色。我希望酒吧在“链接”右侧填充颜色。但是，仅设置整个列表的背景颜色不起作用，因为它还为我想要保持透明的区域设置背景颜色。代码和截图如下：提前感谢！

Html代码似乎无法在预览中工作，这里是一个pastebin链接，以防它实际上被破坏：https://pastebin.com/TxQV50Ey

屏幕截图：

body {
  background-image: url("../resources/background.png");
  font-family: "courier";
  color: white;
  margin: 0px;
}

ul {
  list-style-type: none;
  margin-top: 8px;
  padding: 0;
}

li {
  display: inline;
  overflow: hidden;
}

<ul>
  <li><img src="../resources/logo.png" alt="MClogo" width=50px height=50px style="margin-left: 5px;"></li>
  <!--
    -->
  <li><img src="../resources/bt_IGNORE.png" width=15px height=50px></li>
  <!--
    -->
  <li><img src="../resources/bt_imageboard.png" width=150px height=50px></li>
  <!--
    -->
  <li><img src="../resources/bt_downloads.png" width=123px height=50px></li>
  <!--
    -->
  <li><img src="../resources/bt_tools.png" width=123px height=50px></li>
  <!--
    -->
  <li><img src="../resources/bt_links.png" width=123px height=50px></li>
  <!--
    -->
  <li><img src="../resources/bt_PADDING.png" width=50px height=50px style="float: right; background-color: #BBBFDC;"></li>
</ul>

Answer 1

请将背景颜色或背景图片添加到作为父元素的ul元素，以便填充整个背景