CODEWITHSUNDEEP
css
Mikolaj Marcisz
Mikolaj Marcisz

Reputation: 159

Text opacity in CSS

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.

#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. 

 #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?

Upvotes: 5

Views: 7370

Answers (2)

Ghilas BELHADJ
Ghilas BELHADJ

Reputation: 14096

use rgba values:

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

Upvotes: 2

Dan
Dan

Reputation: 3870

You can use rgba as the color attribute like this:

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

Upvotes: 8

Related Questions