Css no opacity on inside div when image is on body

Question

My code is like this

<body style="background: url('im.jpeg')">
<div class="inner" style="opacity:0.5;margin-left:20px">
  <div class="innermost">
  <p>My content</p>
  </div>
</div>   
</body>

The problem with my code is that it body has an image so that it would be on full screen and class "innermost" has original content including pics and texts , opacity is assigned to "inner" class. And this opacity affects all element of "innermost". Is there any solution to prevent opacity of "innermost" class without affecting body style. Thanks for reading.

Update

is there any other alternative of my code , such that i can have image on full screen.

See that question, it will tell you the answer (which is sorry, it won't work) and it will give you some workarounds (none of which are great). — KRyan, Sep 11 '13 at 23:20

score 2 · Answer 1 · answered Sep 11 '13 at 23:11

2

It is not going to happen the way you want. If innermost is inside inner, it is part of its content, and will be transparent too. Depending on what you want to achieve, you can apply an alternative. For example, a transparent background. Or remove innermost from inner, and use position absolute:

<div style="position:relative;margin-left:20px">
    <div class="inner" style="opacity:0.5;">

    </div>
    <div class="innermost" style="position:absolute; left:0; top:0;">
        <p>My content</p>
    </div>
</div>

answered Sep 11 '13 at 23:11

Hugo Silva

6,748
3
25
42

srry im not satisfied – rickj Sep 11 '13 at 23:16
And why is that? What else are you after? – Hugo Silva Sep 11 '13 at 23:20
as I mentioned I want image to be displayed – rickj Sep 11 '13 at 23:22
I see. You want a code that you can copy, paste and magically see working. Sorry, can't provide you satisfaction. – Hugo Silva Sep 11 '13 at 23:27
dude I respect your thoughts , but I really don't mean that, I just wanna know , there must be some previous example and u need not to be so rude – rickj Sep 11 '13 at 23:30
@rickj Hugo Silva is right, transparent PNG is the way to go. Even if it doesn't satisfy you. :) – Charles Ingalls Sep 11 '13 at 23:46
@domdev , so how can we use image in that – rickj Sep 11 '13 at 23:50

score 1 · Answer 2 · answered Sep 11 '13 at 22:55

1

I think you can try to add css property "style: none" for your class "innermost". Doing that, you "stop" the opacity specified below.

answered Sep 11 '13 at 22:55

Julien Dumortier

21
2

1

no dude opacity doesn't relate to style – rickj Sep 11 '13 at 22:57

score 0 · Accepted Answer · answered Sep 12 '13 at 00:00

0

If a parent element has an opacity value set at, say, 0.5, all of its children will inherit that opacity setting, and there’s no way to reverse that opacity on the child elements. Read this http://www.impressivewebs.com/fixing-parent-child-opacity/

answered Sep 12 '13 at 00:00

Rishabh Goyal

99
15

1

not exactly but it seems good.I'll try to implement it.Thanks – rickj Sep 12 '13 at 00:02
in that example the author has used js.. and im not the real author of the site – Rishabh Goyal Sep 12 '13 at 00:10

Css no opacity on inside div when image is on body

3 Answers3