CSS 整个 body 标签的不透明度,一个 div 标签除外
CSS Opacity on entire body tag except on one div
我正在尝试制作加载页面。我的 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
。我怎样才能排除它?
试试这个
<div id="loadingImageFc" class="loadingImageFcClass">
<img src="loading-text.gif" />
</div>
body:not(.loadingImageFcClass) {
opacity:0.2;
}
去掉 body
的不透明度,然后把它放在 p.pTest
上。
p.pTest {
height: 200px;
width: 200px;
background-color: green;
opacity:0.2;
}
设置元素的不透明度会改变整个元素的外观包括其所有后代。
您必须重写 HTML,例如,您要更改其不透明度的元素不是主体(例如,您可以使用 div 包裹当前内部的所有内容正文,或您现有的 <p class="pTest">
) 和您希望完全可见的图像是该元素的同级元素。
将 body 设置为 opacity:0.2 将改变页面上的所有内容。为元素设置自定义样式。例如,您为 "body" 设置了不透明度,您可以创建自定义样式以附加到包装器并仅包围您想要更改的选择。
因此,如果您有多个页面,请仅将所需页面包装在该样式包装器中。如果是想要选的页面,就把那块包起来。
就像 Silver Ringvee 所建议的那样,将您不希望半透明的值设置为 1。
首先问问自己:
为什么要body 不透明度为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>
我已经用大纲解决了这个问题:
.highlighted {
outline: 10000px solid rgba(0, 0, 0, 0.3);
}
我正在尝试制作加载页面。我的 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
。我怎样才能排除它?
试试这个
<div id="loadingImageFc" class="loadingImageFcClass">
<img src="loading-text.gif" />
</div>
body:not(.loadingImageFcClass) {
opacity:0.2;
}
去掉 body
的不透明度,然后把它放在 p.pTest
上。
p.pTest {
height: 200px;
width: 200px;
background-color: green;
opacity:0.2;
}
设置元素的不透明度会改变整个元素的外观包括其所有后代。
您必须重写 HTML,例如,您要更改其不透明度的元素不是主体(例如,您可以使用 div 包裹当前内部的所有内容正文,或您现有的 <p class="pTest">
) 和您希望完全可见的图像是该元素的同级元素。
将 body 设置为 opacity:0.2 将改变页面上的所有内容。为元素设置自定义样式。例如,您为 "body" 设置了不透明度,您可以创建自定义样式以附加到包装器并仅包围您想要更改的选择。
因此,如果您有多个页面,请仅将所需页面包装在该样式包装器中。如果是想要选的页面,就把那块包起来。
就像 Silver Ringvee 所建议的那样,将您不希望半透明的值设置为 1。
首先问问自己:
为什么要body 不透明度为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>
我已经用大纲解决了这个问题:
.highlighted {
outline: 10000px solid rgba(0, 0, 0, 0.3);
}