Text opacity in CSS

Question

Is there any way I could treat text inside of a wordpress widget, to make it semi transparent using an opacity funcion? Only limiting myself to the content of the following code block.

Click to copy

#content .widget .caption h3 {
color:#000000;
font-family:'Overlock';
margin:0 -10px;
padding:0 10px;
font-size:27px;
height:46px;
line-height:46px;
font-weight:bold;

}

With the option below, the entire widget will be treated as transparent.

Click to copy

 #content .widget .caption h3 {
color:#000000;
font-family:'Overlock';
margin:0 -10px;
padding:0 10px;
font-size:27px;
height:46px;
line-height:46px;
font-weight:bold;
opacity:0.2;

}

I only want the to have its opacity changed. Is it even possible that way?

Answer 1

You can use rgba as the color attribute like this:

Click to copy

color: rgba(0,0,0,0.5);

The 0.5 at the end specifiies 50% opacity. This would apply only to the text, and not the containing element.

You've got to watch the browser compatibility

Answer 2

use rgba values:

Click to copy

color: rgba(0,0,0, 0.2)