是否可以在不影响子元素不透明度的情况下设置背景图像的不透明度？

例

页脚中的所有链接都需要一个自定义项目符号(背景图像),自定义项目符号的不透明度应为50%.

HTML

<div id="footer">
    <ul>
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
        <li><a href="#">Link 4</a></li>
        <li><a href="#">Link 5</a></li>
    </ul>
</div>  

CSS

#footer ul li {
    background: url(/images/arrow.png) no-repeat 0 50%;
}  

我试过的

我尝试将列表项的不透明度设置为50%,但是链接文本的不透明度也是50% - 并且似乎没有办法重置子元素的不透明度:

#footer ul li {
    background: url(/images/arrow.png) no-repeat 0 50%;
    /* will also set the opacity of the link text */        
    opacity: 0.5;
}

我也尝试过使用rgba,但这对背景图片没有任何影响:

#footer ul li {
    /* rgba doesn't apply to the background image */
    background: rgba(255, 255, 255, …

与如何使用CSS为文本或图像提供透明背景相关？,但略有不同.

我想知道是否可以更改背景图像的alpha值,而不仅仅是颜色.显然我可以用不同的alpha值保存图像,但我希望能够动态调整alpha.

到目前为止,我得到的最好的是:

<div style="position: relative;">
    <div style="position: absolute; left: 0px; right: 0px; top: 0px; bottom: 0px;
                      background-image: url(...); opacity: 0.5;"></div>
    <div style="position: relative; z-index: 1;">
        <!-- Rest of content here -->
    </div>
</div>

它有效,但它体积庞大,丑陋,并且在更复杂的布局中混乱.

我有以下代码，并为纯色叠加颜色添加了不透明度。问题是文本也在使用不透明度。如何更改它以使文本没有不透明度并位于顶部？

.container {
  position: relative;
  width: 50%;
}

.image {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  background-color: #008CBA;
  opacity: .5;
  overflow: hidden;
  width: 100%;
  height: 0;
  transition: .5s ease;
}

.container:hover .overlay {
  bottom: 0;
  height: 100%;
}

.text {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}

<div class="container">
  <img src="https://cdn.searchenginejournal.com/wp-content/uploads/2019/07/the-essential-guide-to-using-images-legally-online-1520x800.png" class="image">
  <div class="overlay"> …