Transparency is a property outside the color itself, and it’s also known as alpha
component. You can’t code transparency as pure RGB (which stands for red-green-blue channels), but you can use the RGBA notation, in which you define the color + alpha channel together:
color: rgba(255, 0, 0, 0.5); /* red at 50% opacity */
If you want “transparent”, just set the last number to 0, regardless of the color. All of the following result in “transparent” even though the color part is set to 100% red, green and blue respectively:
color: rgba(255, 0, 0, 0); /* transparent */ color: rgba(0, 255, 0, 0); /* transparent */ color: rgba(0, 0, 255, 0); /* transparent */
There’s also the HEXA notation (or RRGGBBAA) now supported on all major browsers, which is pretty much the same as RGBA but using hexadecimal notation instead of decimal:
color: #FF000080; /* red at 50% opacity */
Additionally, if you just want a transparent background, the simplest way to do it is:
background: transparent;
You can also play with opacity
, although this might be a tad too much and have unwanted side effects in your case:
.half { opacity: 0.5; filter: alpha(opacity=50); /* needed to support IE, my sympathies if that's the case */ }