How to add a color overlay to a background image?
<p>I have seen this question a lot both on SO and the Web. But none of them has been what I am looking for.</p>

<p>How do I add a color-overlay to a background image using CSS only?</p>

<p>Example HTML:</p>

<pre><code>&lt;div class="testclass"&gt;
&lt;/div&gt;
</code></pre>

<p>Example CSS:</p>

<pre><code>.testclass {
    background-image: url("../img/img.jpg");
}
</code></pre>

<p>Please note:</p>

<ul>
<li><p>I want to solve this by only using CSS. i.e I do NOT want to add a child div within the div "testclass" for the color overlay.</p></li>
<li><p>This should not be a "hover effect" I want to simply just add a color-overay to the background image.</p></li>
<li><p>I want to be able to use opacity i.e. I am looking for a solution that allows RGBA color.</p></li>
<li><p>I am looking for just one color, lets say black. Not a gradient.</p></li>
</ul>

<p>Is this possible? (I would be surprised if not, but I have not been able to find anything about this), and if so what the best way to accomplish this? </p>

<p>All suggestions and advice are appreciated!</p>