Is it possible to mix transparent and solid colors in CSS3?

Question

Is it possible to dynamically make a transparent background from a solid and a transparent color in CSS3? For example:

<div class="red trans1">
CONTENT
</div>

with CSS

.red {
background: #FF0000;
}
.trans1
background: rgba(255,255,255,0.5);
}

In this case, solid color will totally cover the transparency. Of course, I mean using different properties (background, background-color, etc).

I have 10 solid colors, and want to create 10 level of transparency for each. If individually making the transparent color for each color, it needs 100 CSS classes; e.g.:

.red1 {
.background: rgba(255,0,0,0.1);
}
.red2 {
.background: rgba(255,0,0,0.2);
}
.red3 {
.background: rgba(255,0,0,0.3);
}
....
.blue1 {
.background: rgba(0,0,255,0.1);
}
.blue2 {
.background: rgba(0,0,255,0.2);
}
.blue3 {
.background: rgba(0,0,255,0.3);
}

I am looking for a dynamic way to mix the solid color and a transparent background.

Answer 1

Pure CSS

Yes, you can disassociate the color and transparency by creative use of pseudo-elements. For example, this fiddle demonstrates the following code (notice I have arranged everything based on the :after pseudo-element):

HTML

<div class="opBkg red op10">Red 10%</div>
<div class="opBkg red op50">Red 50%</div>
<div class="opBkg blue op80">Blue 80%</div>

Relevant CSS

.opBkg {
  position: relative;
}

.opBkg:after {
  content: '';
  position: absolute;
  z-index: -1;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
}

.red:after {
  background-color: red;
}
.blue:after {
  background-color: blue;
}
.op10:after {
  opacity: .1;  
}
.op50:after {
  opacity: .5;  
}
.op80:after {
  opacity: .8;  
}

You would have 10 opacity rules, however many colors you want, and then the overarching opBkg class to set things up.