How to set opacity to the background color of a div? [duplicate]

Question

I have this class

.box { background-color:#fff; border:3px solid #eee; }

My question is how can I set an opacity to the white background only so that it will kinda mix with my background?

Thank you.

Mceachern

Just put the exact color what u need instead of white.. :) – Pitchman

@kvijayhari — assuming the background is a solid colour. – Stheno

I dont mean that, I need to "blend" it with my white color – Mceachern

look at the popular #806500 – Burp

Answer 1

CSS 3 introduces rgba colour, and you can combine it with graphics for a backwards compatible solution.

Stheno

This is the way I always work when I have to do something with front-end code. Useful answer. – Ostrowski

You are right.. But i dont understand the need for this .. Can u explain a bit of it.. Look at the example at dorward.me.uk/www/css/alpha-colour/demo-3.html , it ok with that.. But why can't just put the background color of #7F0080 which is the semitransparent color result in that example.. Most importantly that will be supported by all browsers.. – Pitchman

This uses a "fallback image" though, not really a good idea in my opinion. – Coleen

@kvijayhari — Because the translucent element overlaps things of more then a single solid colour. – Stheno

@Coleen — I said you can combine it with graphics for backwards compatibility, you don't have to. If you want a solid colour in browsers that don't support rgba then that is also an option. – Stheno

Answer 2

I think rgba is the quickest and easiest!

background: rgba(225, 225, 225, .8)

Andry

Answer 3

I think this covers just about all of the browsers. I have used it successfully in the past.

#div {
    filter: alpha(opacity=50); /* internet explorer */
    -khtml-opacity: 0.5;      /* khtml, old safari */
    -moz-opacity: 0.5;       /* mozilla, netscape */
    opacity: 0.5;           /* fx, safari, opera */
}

Coleen

That applies to the whole element, not just the background. – Stheno

Yeah, that is what the OP wants. – Coleen

Yea, not a totally hustle free but you can make it so that just the background opacity will be changed. @Coleen cant be sure about that.. there is not mentioning if this .box has any content in it. – Larch

@Coleen — the question says "to the white background" – Stheno

@Lollero — not using opacity, that applies to the whole element. – Stheno

@phil as i said, it does take some work but still. It is doable: jsfiddle.net/4tTNZ – Larch

@Lollero, I totally agreed with you and knew it could be done. – Coleen

@phil Sorry, meant to say that to @Stheno – Larch

@Stheno no? where do you base that on? Just because in my example it doesnt do something, doesnt mean that it cant do so in any situation. I did that as a proof of concept. If you add float: left; to the outer div, it will wrap around the text. It acts just as normal div box would, it just has extra markup. – Larch

lol am i imagining things? Where did Quentins comment go? – Larch

Answer 4

You can use CSS3 RGBA in this way:

rgba(255, 0, 0, 0.7);

0.7 means 70% opacity.

Justifiable

Answer 5

I would say that the easiest way is to use transparent background image.

http://jsfiddle.net/m48nH/

background: url("http://musescore.org/sites/musescore.org/files/blue-translucent.png") repeat top left;

Larch