30

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.

EnexoOnoma
  • 8,454
  • 18
  • 94
  • 179

5 Answers5

29

I think rgba is the quickest and easiest!

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

Kevin Brown
  • 12,602
  • 34
  • 95
  • 155
19

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

Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
  • 1
    This is the way I always work when I have to do something with front-end code. Useful answer. – Andrzej Ośmiałowski Jul 08 '11 at 12:40
  • You are right.. But i dont understand the need for this .. Can u explain a bit of it.. Look at the example at http://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.. – Vijay Jul 08 '11 at 12:42
  • This uses a "fallback image" though, not really a good idea in my opinion. – Phil Jul 08 '11 at 12:43
  • @kvijayhari — Because the translucent element overlaps things of more then a single solid colour. – Quentin Jul 08 '11 at 12:44
  • @Phil — 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. – Quentin Jul 08 '11 at 12:45
7

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 */
}
Phil
  • 10,948
  • 17
  • 69
  • 101
  • 2
    That applies to the whole element, not just the background. – Quentin Jul 08 '11 at 12:43
  • Yeah, that is what the OP wants. – Phil Jul 08 '11 at 12:44
  • Yea, not a totally hustle free but you can make it so that just the background opacity will be changed. @Phil cant be sure about that.. there is not mentioning if this .box has any content in it. – Joonas Jul 08 '11 at 12:45
  • @Phil — the question says "to the white **background**" – Quentin Jul 08 '11 at 12:46
  • 2
    @Lollero — not using `opacity`, that applies to the whole element. – Quentin Jul 08 '11 at 12:47
  • @phil as i said, it does take some work but still. It is doable: http://jsfiddle.net/4tTNZ/ – Joonas Jul 08 '11 at 13:01
  • @Lollero, I totally agreed with you and knew it could be done. – Phil Jul 08 '11 at 13:08
  • @phil Sorry, meant to say that to @Quentin – Joonas Jul 08 '11 at 14:05
  • @Quentin 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. – Joonas Jul 08 '11 at 14:14
  • lol am i imagining things? Where did Quentins comment go? – Joonas Jul 08 '11 at 14:16
5

You can use CSS3 RGBA in this way:

rgba(255, 0, 0, 0.7);

0.7 means 70% opacity.

JasonMArcher
  • 14,195
  • 22
  • 56
  • 52
Umair Hamid
  • 3,509
  • 3
  • 23
  • 25
3

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;
Joonas
  • 7,227
  • 9
  • 40
  • 65