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

Question

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

例

页脚中的所有链接都需要一个自定义符号(背景图像)，并且自定义符号的不透明度应该是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, 0.5) url(/images/arrow.png) no-repeat 0 50%;}

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

Answer 1

将图像放入图像编辑器，关闭不透明度，将其保存为.png，然后使用它。