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?

回答1:

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.

回答2:

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

回答3:

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.

回答4:

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>

回答5:

try this

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

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

来源：https://stackoverflow.com/questions/61225166/i-want-to-opacity-all-page-without-one-div-how-can-i-achieve-it

标签

html

css

opacity