是否可以,仅使用CSS,使background元素半透明但元素的内容(文本和图像)不透明？

我想在不将文本和背景作为两个单独元素的情况下实现此目的.

尝试时:

p {
  position: absolute;
  background-color: green;
  filter: alpha(opacity=60);
  opacity: 0.6;
}

span {
  color: white;
  filter: alpha(opacity=100);
  opacity: 1;
}

<p>
  <span>Hello world</span>
</p>

看起来子元素受父母的不透明度影响,因此opacity:1相对于opacity:0.6父元素而言.

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

例

页脚中的所有链接都需要一个自定义项目符号(背景图像),自定义项目符号的不透明度应为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, …

让我说我有

<div class="myDiv">Hi there</div>

我想提出一个background-image并给它一个opacity的0.5-但我想,我写的文字将有充分的不透明度(1).

如果我像这样写CSS

.myDiv { opacity:0.5 }

一切都将是低透明度 - 我不希望这样.

所以我的问题是 - 如何获得具有完全不透明度文本的低不透明度背景图像？