Opacity applying on all inner elements

Question

I'm trying to make opacity on only navigation background, but its applying on all inner divs like logo and nav, but I don't want apply opacity to logo background.

How can i make this possible? I'm using code like this:

HTML

<div class="navigation">
    <div class="logo"> logo image here  </div>
    <nav> navigation code here </nav>
</div>

possible duplicate of [Transparent background, but not the content (text & images) inside it, in CSS only?](http://stackoverflow.com/questions/806000/transparent-background-but-not-the-content-text-images-inside-it-in-css-on) — Paulie_D, Mar 28 '14 at 11:44

score 1 · Accepted Answer · answered Mar 28 '14 at 11:47

1

Hi please use rgba background which only make background opacity

.outer {
 background:rgba(0,0,0,0.5);
}

answered Mar 28 '14 at 11:47

Kiran

125
9

I really didn't thought about it. Thnks Kiran ;) – Kesar Sisodiya Mar 28 '14 at 12:14

GolezTrol · Answer 2 · 2014-03-28T11:47:10.727

If you set the opacity of an element, it applies to all the elements it contains. You can give them an opacity as well, but it will be relative between 0 and the parent's opacity, as you can see here: http://jsfiddle.net/hLw2c/

In other words, it's not possible to do it like this:

<div class="outer">YO<div class="inner">Zippazip</div></div>    

.outer {
    opacity: 0.5;
    background-color: red;
}

.inner {
    opacity: 1;
    background-color: blue;
}

One possible workaround is to use a pseudo element to fake the background, like this: http://jsfiddle.net/hLw2c/1/

<div class="outer">YO<div class="inner">Zippazip</div></div>    

.outer {
    position: relative;
}
.outer:before {
    position: absolute;
    display: block;
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.3;
    background-color: red;
    z-index: -1;
}

.inner {
    opacity: 1;
    background-color: blue;
}

Now, the header itself is fully opaque and doesn't have a background. The background is made by the :before pseudo element. This can be half transparent without affecting the other content of the header, because that content is not inside the pseudo element.

With a little tricks, it can be obtained. For example CSS3 alpha color mode, or opacity png :). — Jacek Kowalewski, Mar 28 '14 at 11:45

score 0 · Answer 3 · edited Mar 28 '14 at 11:49

0

You should save png with opacity background (for example 80%), and change only the background of the needed div. That's all I think!

Example:

div#navigation {background: url('/src/image.png') center center repeat;}

In that case png with opacity works for element background, and all otrher things (texts, etc) are perfectly visible. Example of image: http://jacekkowalewski.com/images/black85.png

Or add CSS rgba background style:

background:rgba(0,0,0,0.5);

edited Mar 28 '14 at 11:49

Ripaz

100
5

answered Mar 28 '14 at 11:42

Jacek Kowalewski

2,761
2
23
36

Wait, what exactly do I need to see on that image? except a very tiny black square? – Déjà vu Mar 28 '14 at 11:45
That's all. This image will be repeated. And this tiny square is black but with a little opacity. Try my code, and you will se the result. Remember to change /src/image.png to your url of that image. – Jacek Kowalewski Mar 28 '14 at 11:47
Then you got a black/grey overlay, right? Overlaying a semi transparent image doesn't make the stuff underneath it transparent. – GolezTrol Mar 28 '14 at 11:49
No you get a transparent background of this element. IN that case everything inside this element is visible, while ony the background of this element is transparent. And when background is transparent you can see things below it. – Jacek Kowalewski Mar 28 '14 at 11:51

score 0 · Answer 4 · answered Mar 28 '14 at 11:46

0

If your background is color (not image) then you can give color using rgba instead of hash like this: background-color: rgba(200,100,200,0.5) (last number is opacity from 0 to 1)

answered Mar 28 '14 at 11:46

Volvox

1,639
1
12
10

Also remember about browser support. This feature is CSS3 as I think, and not every browser can support it well. But this is additional functionality, so this solution is also good. – Jacek Kowalewski Mar 28 '14 at 11:48

score 0 · Answer 5 · answered Mar 28 '14 at 11:50

0

<div class="navigation">
        <div class="logo"> logo image here  </div>
        <nav> navigation code here </nav>
    </div>

.navigation{
  opacity:0.6;
}
.navigation #logo{
  opacity:1.0;
}

answered Mar 28 '14 at 11:50

Tuhin

3,335
2
16
27

Opacity applying on all inner elements

5 Answers5