CSS Opacity on entire body tag except on one div(除一个div外的整个Body标签上的CSS不透明度)
本文介绍了除一个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不透明度的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!
沃梦达教程
本文标题为:除一个div外的整个Body标签上的CSS不透明度


基础教程推荐
猜你喜欢
- 用于 Twitter 小部件宽度的 HTML/CSS 2022-01-01
- Vue 3 – <过渡>渲染不能动画的非元素根节点 2022-01-01
- html表格如何通过更改悬停边框来突出显示列? 2022-01-01
- 自定义 XMLHttpRequest.prototype.open 2022-01-01
- 直接将值设置为滑块 2022-01-01
- 我可以在浏览器中与Babel一起使用ES模块,而不捆绑我的代码吗? 2022-01-01
- Chart.js 在线性图表上拖动点 2022-01-01
- 如何使用TypeScrip将固定承诺数组中的项设置为可选 2022-01-01
- Electron 将 Node.js 和 Chromium 上下文结合起来意味着 2022-01-01
- 如何使用JIT在顺风css中使用布局变体? 2022-01-01