CSS Opacity on entire body tag except on one div

2020-05-10 08:34发布

站内问答 / HTML/CSS
404 5 5

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?

标签： html css opacity
举报
5条回答
劫难
2楼-- · 2020-05-10 09:14

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;
}
查看更多
0人赞 添加讨论(0) 举报
相关推荐>>
3楼-- · 2020-05-10 09:16

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>
查看更多
0人赞 添加讨论(0) 举报
Summer. ? 凉城
4楼-- · 2020-05-10 09:22

try this

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

body:not(.loadingImageFcClass) {
  opacity:0.2;
}
查看更多
0人赞 添加讨论(0) 举报
贼婆χ
5楼-- · 2020-05-10 09:26

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.

查看更多
0人赞 添加讨论(0) 举报
唯我独甜
6楼-- · 2020-05-10 09:28

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.

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)