Geek Answers Handbook

CSS opacity for the entire body tag except one div

I am trying to make a download page. My html code is as follows.

<!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>
Run codeHide result

When I run this, my boot image also gets opacity: 0.2. How can I exclude it?

+4
source share
6 answers

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

HTML , , , , , (, div, , , <p class="pTest">). , , .

+2

DEMO

body p.pTest.

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

: 0.2 . . , , "", .

, , . , .

Silver Ringvee, 1 , .

+1

First ask yourself:

Why do you want the body to be 0.2 opacity? Is it because you want the load to be displayed with some opacity?

If so, you can simply set the CSS background color with rgba. It will 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>
0
source

Just give it a different opacity value. In this case, it will be 1.

-2
source

try it

<div id="loadingImageFc" class="loadingImageFcClass">
  <img src="loading-text.gif" />
</div>

body:not(.loadingImageFcClass) {
  opacity:0.2;
}
-2
source

More articles:


All Articles