How would you add fall back support for background color with alpha for legacy browsers?

Question

I'm trying to set the background color but I want to use the alpha channel. Is there a way I can support new browsers with transparency and ensure older browsers show the correct color when transparency is not an option?

For example, will the following be sufficient or will the second value cancel the first:

background-color: rgb(255, 0, 0);       // older browsers
background-color: rgba(255, 0, 0, 0.5); // newer browsers

UPDATE:
I do not care to support transparency on older browsers. I want to make sure that older browsers use show the correct background color and newer browsers, if they support it, show the alpha channel.

Answer 1

Use a translucent PNG file as a background for older browsers. Something like the below:

What happens with this is, check out the snippet:

.parent {position: relative; width: 150px; height: 150px; margin: 20px; border: 1px solid #999; display: inline-block;}
.child {position: absolute; width: 50px; left: 50px; top: 50px; height: 50px; background: url("https://upload.wikimedia.org/wikipedia/commons/d/d3/Black_%2850%25_transparent%29.png") repeat;}

#one {background: #ff9;}
#two {background: #99f;}

<div class="parent" id="one">
  <div class="child"></div>
</div>

<div class="parent" id="two">
  <div class="child"></div>
</div>