css transparent body excluding images

Question

I have this code

    body {
        background-color: #808080;
        background-image: url('/Content/img/emboss.png');
        background-repeat: no-repeat;
        background-position: center 250px;
        font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
        font-size: 10pt;
        opacity: 0.8;
    }
    img {
        opacity: 1;
    }

However it doesn't work. The entire site, every element has an opacity of 0.8 which is what I want and it looks perfect. However when rendering an image I don't want any transparency.

How would I go about doing this in my css

I don't think you can override parent opacity from a child: http://stackoverflow.com/questions/21886830/how-to-override-opacity-for-a-child — Kevin F, May 27 '15 at 06:00
Elements in body can have max opacity as its parent, `.8`. Set `opacity: .8` to elements which don't contain `img`, not `body`. — pavel, May 27 '15 at 06:00
Use `background: rgba(0, 0, 0, 0.4);` in body if you don't mind — Elyor, May 27 '15 at 06:03

score 2 · Answer 1 · answered May 27 '15 at 06:18

2

You can achieve this using little trick. Use :not pseudo selector like below.

 body {
    background-color:#808080;
    background-image: url('/Content/img/emboss.png');
    background-repeat: no-repeat;
    background-position: center 250px;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    font-size: 10pt;
   }
   body :not(img)
   {
    opacity:0.7;
   }

DEMO

answered May 27 '15 at 06:18

Suresh Ponnukalai

13,820
5
34
54

it will work. did you apply the same code what i have written? – Suresh Ponnukalai May 27 '15 at 12:26
Yes, copy and paste. Images are still transparent, however I see it works in your DEMO – Dale Fraser May 27 '15 at 12:51

score 0 · Accepted Answer · answered May 27 '15 at 06:12

You cannot use opacity property for this kind of effect. Rather create a div over the body and keep its background color as rgba (255,255,255,0.8) and then add image inside that div.

Changing alpha values is the only way of separating the opacity of a parent to its child.

css transparent body excluding images

2 Answers2