除一个div外的整个Body标签上的CSS不透明度 [英] CSS Opacity on entire body tag except on one div

查看:0
本文介绍了除一个div外的整个Body标签上的CSS不透明度的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在尝试制作一个加载页面。我的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,例如,您要更改其不透明度的元素不是Body(例如,您可以使用div来包装Body中当前的所有内容,或者您现有的<p class="pTest">),并且您希望完全可见的图像是该元素的同级图像。

这篇关于除一个div外的整个Body标签上的CSS不透明度的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆