title: Set opacity of background image without affecting child elements
body: <p>Is it possible to set the opacity of a background image without affecting the opacity of child elements?</p>
  
  <h1>Example</h1>
  
  <p>All links in the footer need a custom bullet (background image) and the opacity of the custom bullet should be 50%.</p>
  
  <h2>HTML</h2>
  
  <pre><code>&lt;div id="footer"&gt;
      &lt;ul&gt;
          &lt;li&gt;&lt;a href="#"&gt;Link 1&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Link 2&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Link 3&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Link 4&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Link 5&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;  
  </code></pre>
  
  <h2>CSS</h2>
  
  <pre><code>#footer ul li {
      background: url(/images/arrow.png) no-repeat 0 50%;
  }  
  </code></pre>
  
  <h1>What I've Tried</h1>
  
  <p>I tried setting the opacity of the list items to 50%, but then the opacity of the link text is also 50% - and there doesn't seem to be a way to reset the opacity of child elements:</p>
  
  <pre><code>#footer ul li {
      background: url(/images/arrow.png) no-repeat 0 50%;
      /* will also set the opacity of the link text */        
      opacity: 0.5;
  }
  </code></pre>
  
  <p>I also tried using rgba, but that doesn't have any effect on the background image:</p>
  
  <pre><code>#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%;
  }
  </code></pre>