CSS Opacity on entire body tag except on one div

DEMO

Take the opacity off the body and put it on the p.pTest.

p.pTest {
    height: 200px;
    width: 200px;
    background-color: green;
    opacity:0.2;
}

First ask yourself:

Why do you want the body to be 0.2 opacity? Is it because you want the loading overlay to show with some opacity?

If so, you can just set the background color of the CSS with rgba. It would look like this: DEMO: https://jsfiddle.net/gynLj1s3/

CODE:

<!doctype html>

<html lang="en">
<head>
   <meta charset="utf-8">
   <title>Coba</title>
   <style type="text/css">
   p.pTest {
       height: 200px;
       width: 200px;
       background-color: green;
       opacity: 1;
   }

#loadingImageFc {
  position: fixed;
  top: 50%;
  left: 50%;
  /* bring your own prefixes */
  transform: translate(-50%, -50%);
  z-index:9999;/* make higher than whatever is on the page */
  background-color: rgba(0,0,0, 0.2);
  width: 100%;
  height: 100%;
}

body{
   opacity: 1;
}
   </style>
   <script type="text/javascript">

   </script>
</head>
<body>
   <p class="pTest">
      Test
   </p>

   <div id="loadingImageFc">
      <img src="loading-text.gif" />
   </div>
</body>
</html>

Setting body to opacity:0.2 will alter everything on your page. Set a custom style for the element. For example, you have the opacity set for "body", you can create a custom style to attach to a wrapper and surround only the selection you want altered.

So if you have multiple pages, only wrap the desired page in that style wrapper. If it is a desired selection of the page, wrap that piece.

Like Silver Ringvee suggested, set the value to 1 for what you don't want translucent.


Setting the opacity of an element changes the appearance of the whole element including all its descendants.

You would have to rewrite your HTML so that, for example, the element you are changing the opacity of is not the body (e.g. you could use a div wrapped around everything currently inside the body, or your existing <p class="pTest">) and the image you want to be fully visible is a sibling of that element.

Tags:

Html

Css

Opacity

Recent Posts