how to change opacity of a div without changing opacity of other element in the same div?

Question

In my header div, I want to put opacity .75, however, I do not want to change the opacity of my logo which is placed in the div. Whenever, I put opacity to the whole div, it changes opacity of the logo as well. Can anyone help me in this regard?

Can you please provide us the current HTML and CSS? You may workaround that using the "RGBA" exploit, despite it is not supported in every browser. — briosheje, Mar 12 '15 at 10:49
Just change the opacity of what you want to fade, not the whole div — blex, Mar 12 '15 at 10:49
If your logo is a transparent png you can easily do this. I will see if I can make a fiddle. — lharby, Mar 12 '15 at 10:54

score 7 · Answer 1 · edited Mar 12 '15 at 10:50

7

Try like this:

div{
    background-color:rgba(0,0,0,.5);
}

edited Mar 12 '15 at 10:50

blex

24,941
5
39
72

answered Mar 12 '15 at 10:49

G.L.P

7,119
5
25
41

1

For fallback compatibility: https://css-tricks.com/rgba-browser-support/ despite only IE8 should not support that – briosheje Mar 12 '15 at 10:51
1

I like to use a 1px semi transparent png as the fallback – lharby Mar 12 '15 at 10:53
@lharby: That's clever, indeed. – briosheje Mar 12 '15 at 10:53

Sam · Answer 2 · 2015-03-12T11:00:11.687

0

You can give each div a class like so:

HTML

<div class="header">
    <div class="logo">Logo</div>
</div>

CSS

.header {
    width: 100%
    height: 500px;
    background-color: rgba(0,0,0,.5);
}
.logo {
    display: inline-block;
    width: 100px;
    height: 100px;
    background-color: #000;
    color: #fff;
}

You can see an example, here.

edited Mar 12 '15 at 11:00

answered Mar 12 '15 at 10:53

Sam

1,401
3
26
53

score 0 · Answer 3 · answered Mar 12 '15 at 10:58

Just to add to his here is another solution that will work with a transparent png logo

HTML:

<div class="wrapper">
    <img src="http://upload.wikimedia.org/wikipedia/en/2/2d/SRU-Logo-Transparent.png" />
</div>

CSS:

.wrapper {
    cursor:pointer;
    transition:all 400ms ease-in;
}

.wrapper:hover {
   background:powderBlue;
    transition:all 400ms ease-in;
}

.wrapper img {
    width:100%;
}

JSFIDDLE

Or you can change the hover effect to rgba css

.wrapper:hover {
    background:rgba(0,0,0,0.75);
}

Or use a 1px png

.wrapper:hover {
   background:url("/path/to/transparent.png") repeat;
}

how to change opacity of a div without changing opacity of other element in the same div?

3 Answers3