rgba opacity无法与列表项中的悬停一起使用

Question

我正在尝试创建一个列表，当我将光标悬停在列表项上时，背景颜色会因设置的不透明度而改变，但是我设置的不透明度无法正常工作。

代码如下：

body {
  background-color: #ff9d00;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1600 800'%3E%3Cg stroke='%23000' stroke-width='66.7' stroke-opacity='0.05' %3E%3Ccircle fill='%23ff9d00' cx='0' cy='0' r='1800'/%3E%3Ccircle fill='%23fb8d17' cx='0' cy='0' r='1700'/%3E%3Ccircle fill='%23f47d24' cx='0' cy='0' r='1600'/%3E%3Ccircle fill='%23ed6e2d' cx='0' cy='0' r='1500'/%3E%3Ccircle fill='%23e35f34' cx='0' cy='0' r='1400'/%3E%3Ccircle fill='%23d85239' cx='0' cy='0' r='1300'/%3E%3Ccircle fill='%23cc453e' cx='0' cy='0' r='1200'/%3E%3Ccircle fill='%23be3941' cx='0' cy='0' r='1100'/%3E%3Ccircle fill='%23b02f43' cx='0' cy='0' r='1000'/%3E%3Ccircle fill='%23a02644' cx='0' cy='0' r='900'/%3E%3Ccircle fill='%23901e44' cx='0' cy='0' r='800'/%3E%3Ccircle fill='%23801843' cx='0' cy='0' r='700'/%3E%3Ccircle fill='%236f1341' cx='0' cy='0' r='600'/%3E%3Ccircle fill='%235e0f3d' cx='0' cy='0' r='500'/%3E%3Ccircle fill='%234e0c38' cx='0' cy='0' r='400'/%3E%3Ccircle fill='%233e0933' cx='0' cy='0' r='300'/%3E%3Ccircle fill='%232e062c' cx='0' cy='0' r='200'/%3E%3Ccircle fill='%23210024' cx='0' cy='0' r='100'/%3E%3C/g%3E%3C/svg%3E");
  background-attachment: fixed;
  background-size: cover;
}

ul li {
  cursor: pointer;
  position: relative;
  background: #555;
  list-style: none;
  font-size: 1.2em;
  font-family: fot-matisse-pron, sans-serif;
  font-style: normal;
  font-weight: 500;
  color: #fff;
  text-shadow: 1px 1px 0px #111;
  margin: 0 0 5px 0;
  padding: 20px 16px 20px 86px;
  border-radius: 8px;
  user-select: none;
  -ms-user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  transition: 0.2s;
}

ul li:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

<ul>
  <li>Text1</li>
  <li>Text2</li>
</ul>

当我将列表项悬停时，结果就像将不透明度设置为1而不是0.2一样。

此外，在我测试过的所有浏览器中，结果都是相同的。