title: Change background color opacity without changing background image opacity
body: <p>I want to increase button's background color brightness when user hovers it. But I wanna do that irrespective of the color a button has. Bellow, you can see four buttons. Only the last one works, because it has <code>:hover</code> handler explicitly configured for yellow color.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.hoverme {
      display: inline-block;
      padding:0px;
      width:5em;
      height:5em;
      background-color:black;
      cursor: pointer;
  }
  .hoverme:hover .inner {
      /*
     Pseudocode:
       background-color-opacity: 1;
      */
  }
  .hoverme .inner {
      margin: 0px;
      padding:0px;
      height: 100%;
  }
  
  .hoverme.red .inner {
      background-color: rgba(255,0,0,.9);
  }
  .hoverme.green .inner {
      background-color: rgba(0,200,0,.9);
  }
  .hoverme.yellow .inner {
      background-color: rgba(250,240,0,.9);
  }
  
  .hoverme.yellow.works-but-not-nice:hover .inner {
      background-color: rgba(250,240,0,1);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="hoverme red"&gt;&lt;div class="inner"&gt;text&lt;/div&gt;&lt;/div&gt;
  
  &lt;div class="hoverme green"&gt;&lt;div class="inner"&gt;text&lt;/div&gt;&lt;/div&gt;
  
  &lt;div class="hoverme yellow"&gt;&lt;div class="inner"&gt;text&lt;/div&gt;&lt;/div&gt;
  
  &lt;div class="hoverme yellow works-but-not-nice"&gt;&lt;div class="inner"&gt;this works&lt;/div&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>So I'd like to change the opacity of background color regardless of whether it's yellow, red or whatever. Background images or content should always be fully opaque.</p>
  
  <p>Bonus points for doing this without adding more div elements.</p>