How to make my background opacity 0.7 without affecting the stuff inside it?

Question

I have 2 divs (outer one id = "BD")(inner one id = "content"). I am trying to make the background-color of my BD be less opaque, yet everything inside my content becomes less opaque as well, the images and texts.

How can i solve this?

How about providing an example on http://jsfiddle.net/ or some source code here? — Uwe Keim, Aug 16 '13 at 05:28
there are lots of questions around that deal with this. this is certainly a duplicate question. — gersande, Aug 16 '13 at 05:33

Brigand · Answer 1 · 2013-08-16T05:58:39.533

1

Use RGBA. Here's a color converter that will convert to RGBA.

This is half opaque white.

background-color: rgba(255, 255, 255, 0.5);

edited Aug 16 '13 at 05:58

answered Aug 16 '13 at 05:30

Brigand

84,529
20
165
173

score 0 · Answer 2 · answered Aug 16 '13 at 05:30

0

Substitute the rgb components for the values of your choice.

#bd {
    background-color: rgba(255, 255, 255, 0.7);
}

answered Aug 16 '13 at 05:30

recursive

83,943
34
151
241

score 0 · Answer 3 · edited May 23 '17 at 12:11

Children inherit opacity. It'd kinda be weird if they didn't. You could use a transparent image for your background, or set the background-color of BD using RGBa. (a = alpha).

MDN has a great section on rgba().

Like so:

#BD {
    background-color: rgba(0, 0, 0, 0.7);
}

Just so you're aware though, a lot of times your question will have been asked before and already received some great answers. Its usually a good idea to do a quick search to make sure your question hasn't already been asked.

A quick search of this topic yields this, this, this, and this, for example.

score 0 · Answer 4 · answered Aug 16 '13 at 05:36

There are a couple options:

Use :before. This allows the use of images (fiddle):

#BD {
    position: relative;
}
#BD:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url(http://placehold.it/300);
    opacity: .7;
}

Use rgba and a gradient filter for older IE versions:

#BD {
    background: rgba(0,0,0,.7);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bf000000', endColorstr='#bf000000');
}

IE gradient uses hex for alpha as well. And it's the first 2 digits. You can use the hex to rgb converter in one of the other answers to figure it out by doing 255 * opacity, rounding it, and plugging it in for one of the colors.

How to make my background opacity 0.7 without affecting the stuff inside it?

4 Answers4