37

I only want the background color of white in my div to be translucent roughly 50%. The content should be fully opaque. What's the proper way to do this? I imagined when I looked up the background CSS property, I'd find an opacity setting, but didn't. Don't care about IE6.

UPDATE: solving with the rgba solution given below in conjunction with CSS3PIE's solution for getting rgba to work in IE browsers.

user
  • 23,260
  • 9
  • 113
  • 101
at.
  • 50,922
  • 104
  • 292
  • 461
  • I can read this as saying you want 50% translucency on *only the white parts* of the background image, and any non-white parts remain opaque. I that what you're after? All the answers so far address opacity of the full image. – Stephen P Jan 18 '11 at 21:31
  • @Stephen P, while your interpretation is valid, I **think** he says he wants the `div` to have a `background-color` of white, and for that colour to have a 50% transparency. I don't think he means a css image-mask type thing. – David Thomas Jan 18 '11 at 21:35
  • possible duplicate of [CSS: semi-transparent background, but not text](http://stackoverflow.com/questions/806000/css-semi-transparent-background-but-not-text) – user Feb 02 '14 at 22:16

4 Answers4

65

You can use the background-color: rgba() notation:

#theIdofYourElement,
.classOfElements {
    background-color: #fff;
    background-color: rgba(255,255,255,0.5);
}

Edited to add the default background-color (for browsers that don't understand the rgba() notation). Albeit I was under the impression that all but IE do understand it (but I could be wrong, and haven't tested to be sure...).

Edit with thanks to @akamike.

Edited to address question from OP (in comments):

which browsers don't understand rgba? will they all in the future, is this part of css3?

The best information I could find is the CSS Tricks' rgba() browser support table, with a link to a demo and 'more complete' compatibility table.

David Thomas
  • 249,100
  • 51
  • 377
  • 410
  • It should be added that browsers that do not understand rgba will not have a background, so declare a solid rgb or hex background-color before your rgba declaration. – akamike Jan 18 '11 at 21:27
  • this is what I'm looking for, but which browsers don't understand rgba? will they all in the future, is this part of css3? – at. Jan 18 '11 at 21:35
  • 4
    There is a difference between transparent and translucent. – Jaskaran Singh Feb 04 '18 at 15:15
  • Thanks for replying, the above code you have mentioned makes the background transparent, it may have a color like blue or green, but it is transparent. Translucent is something that is somewhat blurred, like when we put butter on paper, and the light starts passing through it, it is translucent. In iPhone you can see translucent effects See image http://belka.us/en/wp-content/uploads/sites/2/2016/06/blur-table.png – Jaskaran Singh Feb 05 '18 at 14:03
16

If you want cross-browser opacity, you can handle each within your css definition

div
{
    opacity: .50; /* Standard: FF gt 1.5, Opera, Safari, CSS3 */
    filter: alpha(opacity=50); /* IE lt 8 */
    -ms-filter: "alpha(opacity=50)"; /* IE 8 */
    -khtml-opacity: .50; /* Safari 1.x */
    -moz-opacity: .50; /* FF lt 1.5, Netscape */
}
hunter
  • 62,308
  • 19
  • 113
  • 113
  • 7
    This will make the foreground of the div 50% transparent as well, would it not? – minichate Jan 18 '11 at 22:12
  • 1
    this makes the foreground translucent as well – at. Jan 18 '11 at 22:14
  • Makes the foreground translucent as well. The original poster already knew this and is asking how to avoid it. – gillytech Jan 30 '14 at 18:09
  • @gillytech, what are you talking about? – hunter Jan 30 '14 at 20:00
  • 3
    @hunter The original question was asking for a way to make the background div translucent while keeping the items in the div opaque. Your answer would make everything in the div 50% transparent. It's not an appropriate answer. – gillytech Jan 30 '14 at 21:28
10

There is a CSS property called backdrop-filter providing real translucency (as opposed to transparency, which is already available in CSS).

Currently supported by all modern browsers.

.my-selector {
   backdrop-filter: blur(5px);
}
sandstrom
  • 14,554
  • 7
  • 65
  • 62
4

Easiest way is to create a semi-transparent PNG and just use that as your background image for the div.

If you're using Photoshop (or similar tools) just create a 10px by 10px image that is all white -- then drag the opacity slider down to 50%. Save it as a PNG and you should be rockin'!

Using RGBA is also a possibility, but you're not just losing IE6 then -- there are still quite a few people using browsers that don't support the alpha scheme.

minichate
  • 1,914
  • 13
  • 17