Background Color Opacity

I just learned this css trick from a friend of mine and for someone who doesn't use a lot of css it can be quick and harmless when you want to a see through background.

just use this code:

background: rgba (0,0,0,0.7);

The first 3 digits are the color, in this case it's black and the last number is the opacity, which in this case is 70%.

 

thanks for the tip saves writing another line of code!

 

Thanks for this tip but I think you can do more short by using directly opacity
like
background{
opacity:0.5;
}

 

Uhm... no. The opacity property effects the element and everything in the element, not just the background-color. Not even CLOSE to being the same thing.

 

thank you so much for sharing good CSS tutorial.
I hope you continue writing.

 

Thanks for the code , we can uese more color code like :

<table style="background:#80BFFF">

 

Yes you are right
This is only to clear his logic
I think he/she want to change image opacity or like that

 

This is really a nice CSS trick for all the learners as well as developers. It fade the color of background by 70%. First I think that both approaches are same but after applying both code I realize that these are different things.

 

One should point out that RGBA works on ANY CSS property that accepts color -- so that includes background-color, color, border, box-shadow, and linear-gradient.

CSS3 also adds HSLA if you want to work with print-style numbering.

It's also a good idea right now to declare a fallback color first:

background-color:#777;
background-color:rgba(255,255,255,128);

For browsers that don't know CSS3 properties (IE8/lower) -- so users on that browser still get A color, even if it's not the perfect appearance you want.