CSS Opacity on entire body tag except on one div

I am trying to make a loading page. My html code looks like the below.

<!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;
   }

   #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 */
   }

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

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

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

When I run this, my loading image also get the opacity : 0.2. How can I exclude it?

Solution

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.