Question

我正在尝试制作一个加载页面。我的html代码如下所示。

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

当我运行此图片时，我的加载图片也会获得不透明度：0.2。我该如何排除它？

Answer 1

<强> DEMO

将不透明度从body移开，并将其放在p.pTest。

上

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

Answer 2

设置元素的不透明度会改变整个元素的外观，包括其所有后代。

你必须重写你的HTML，以便，例如，你正在改变不透明度的元素不是正文（例如，你可以使用一个div包裹当前身体内的所有内容，或现有的{{1}你希望完全可见的图像是该元素的兄弟。

Answer 3

将正文设置为不透明度：0.2将改变页面上的所有内容。为元素设置自定义样式。例如，您为“body”设置了不透明度，您可以创建一个自定义样式以附加到包装器并仅包围您想要更改的选择。

因此，如果您有多个页面，只需在该样式包装器中包装所需的页面。如果它是页面的理想选择，请包装该页面。

像Silver Ringvee建议的那样，将值设置为1，因为你不想要半透明。

Answer 4

首先问自己：

为什么你想要身体为0.2不透明度？是因为您希望加载叠加显示一些不透明度吗？

如果是这样，您可以使用rgba设置CSS的背景颜色。它看起来像这样：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>

Answer 5

我已经用粗略的轮廓找出了这个问题：

.highlighted {
    outline: 10000px solid rgba(0, 0, 0, 0.3);
}

Answer 6

只需给它一个不同的不透明度值。在这种情况下，它将是1.

Answer 7

试试这个

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

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

除了一个div之外，整个body标签上的CSS Opacity

7 个答案: