38

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.

3
  • 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, 2011 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. Jan 18, 2011 at 21:35
  • possible duplicate of CSS: semi-transparent background, but not text
    – user
    Feb 2, 2014 at 22:16

4 Answers 4

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.

4
  • 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, 2011 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, 2011 at 21:35
  • 4
    There is a difference between transparent and translucent. Feb 4, 2018 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 belka.us/en/wp-content/uploads/sites/2/2016/06/blur-table.png Feb 5, 2018 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 */
}
5
  • 7
    This will make the foreground of the div 50% transparent as well, would it not?
    – minichate
    Jan 18, 2011 at 22:12
  • 1
    this makes the foreground translucent as well
    – at.
    Jan 18, 2011 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, 2014 at 18:09
  • @gillytech, what are you talking about?
    – hunter
    Jan 30, 2014 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, 2014 at 21:28
11

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);
}
1
  • It's working well with Chrome
    – Brad Irby
    Oct 5, 2022 at 12:29
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.

2
  • 1
    that is easy! But I like the rgba solution better
    – at.
    Jan 18, 2011 at 22:15
  • 1
    If you're already using modernizr this solution would be a viable fallback.
    – gillytech
    Jan 30, 2014 at 18:10

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.