整个body标签上的CSS不透明度，除了一个div答案

【问题标题】：CSS Opacity on entire body tag except on one div整个body标签上的CSS不透明度，除了一个div
【发布时间】：2015-06-14 23:12:44
【问题描述】：

我正在尝试制作一个加载页面。我的 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。如何排除？

【问题讨论】：

标签： html css opacity

【解决方案1】：

我用大轮廓解决了这个问题：

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

【讨论】：

【解决方案2】：

首先问问自己：

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

如果是这样，您可以使用 rgba 设置 CSS 的背景颜色。它看起来像这样：DEMO：https://jsfiddle.net/gynLj1s3/

代码：

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

【讨论】：

【解决方案3】：

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

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

就像 Silver Ringvee 建议的那样，将值设置为 1 表示您不希望半透明。

【讨论】：

【解决方案4】：

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

您必须重写您的 HTML，例如，您要更改其不透明度的元素不是主体（例如，您可以使用 div 包裹当前主体内的所有内容，或者您现有的 <p class="pTest">）并且您希望完全可见的图像是该元素的兄弟。

【讨论】：

谢谢..你的回答给了我一个解决方案:)

【解决方案5】：

DEMO

去掉 body 的不透明度并将其放在 p.pTest 上。

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

【讨论】：

【解决方案6】：

试试这个

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

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

【讨论】：

那没有任何效果。身体不是该类的成员。如果它是该类的成员，那么它不会使任何东西成为半透明的。