我的 CSS 工作表不断使我的一个网页具有与背景图像相同的不透明度，但它不会对其他网页执行此操作。我不希望整个页面都具有不透明度，只有背景。我玩过它，但我不确定为什么它会特别针对此页面执行此操作。唯一不同的是这个页面有一个表格，其他页面要么有表格，要么没有表格。如果我应该分享一些 html，请告诉我。 导致它的 css:
div::after {
min-height: 100%;
min-width: 1024px;
pointer-events: none;
width: 100%;
height: auto;
top: 0;
left: 0;
content: "";
display: block;
position: fixed;
background: url(brain.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
opacity: 0.1;
}
添加了 html:
<html>
<head>
<meta charset="utf-8" />
<script>
function display() {
document.getElementById("displayarea").innerHTML = document.getElementById("fname").value;
document.getElementById("fname").value = "";
document.getElementById("displayarea1").innerHTML = document.getElementById("pname").value;
document.getElementById("pname").value = "";
document.getElementById("displayarea2").innerHTML = document.getElementById("rname").value;
document.getElementById("rname").value = "";
document.getElementById("displayarea3").innerHTML = document.getElementById("kname").value;
document.getElementById("kname").value = "";
document.getElementById("displayarea4").innerHTML = document.getElementById("hname").value;
document.getElementById("hname").value = "";
document.getElementById("displayarea5").innerHTML = document.getElementById("oname").value;
document.getElementById("oname").value = "";
}
</script>
<link href="general.css" rel="stylesheet" />
</head>
<body>
<header>
<nav class="horizontal">
<ul>
<li><a href="sitemap.html">Sitemap</a></li>
<li><a href="formpage1.html">Quiz page 1</a></li>
</ul>
</nav>
<article>
<h1>Goal Setting</h1>
<p></p>
</article>
</header>
<table bgcolor="#FF00FF" border="1" align="center">
<tr>
<td>Goal</td>
<td><input type="text" name="fname" id="fname"></td>
</tr>
<tr>
<td>Plan</td>
<td><input type="text" name=pname" id="pname"></td>
</tr>
<tr>
<td>Goal</td>
<td><input type="text" name="rname" id="rname"></td>
</tr>
<tr>
<td>Plan</td>
<td><input type="text" name=kname" id="kname"></td>
</tr>
<tr>
<td>Goal</td>
<td><input type="text" name="hname" id="hname"></td>
</tr>
<tr>
<td>Plan</td>
<td><input type="text" name=oname" id="oname"></td>
</tr>
<tr>
<td> </td>
<td align="center"><input type="button" value="Submit" name="submit" id="submit" onClick="display(event)" /></td>
</tr>
</table>
<table width="400px" align="center" border=0>
<tr style="background-color:#8FBC8F;">
<td align="center"><b>Goal</b></td>
<td align="center"><b>Plan</b></td>
<td align="center"><b>Goal</b></td>
<td align="center"><b>Plan</b></td>
<td align="center"><b>Goal</b></td>
<td align="center"><b>Plan</b></td>
</tr>
<tr>
<td align="center">
<div id="displayarea"></div>
</td>
<td align="center">
<div id="displayarea1"></div>
</td>
<td align="center">
<div id="displayarea2"></div>
</td>
<td align="center">
<div id="displayarea3"></div>
</td>
<td align="center">
<div id="displayarea4"></div>
</td>
<td align="center">
<div id="displayarea5"></div>
</td>
</tr>
</table>
<footer></footer>
</body>
</html>
所以底部图片是现在的样子，它与背景具有相同的不透明度，但我只希望背景具有它，而不是内容。上面的图片是另一个页面的样子，我希望它看起来像那样。 
最佳答案
@jackie，它并没有使所有内容都透明，但图像实际上位于页面内容的上方，因此它看起来也不透明。您的解决方案是将 ::after 伪元素的 z-index 设置为 -1。
div::after {
min-height: 100%;
min-width: 1024px;
pointer-events: none;
width: 100%;
height: auto;
top: 0;
left: 0;
content: "";
display: block;
position: fixed;
background: url(brain.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
opacity: 0.1;
z-index: -1;
}
但就像我在评论中所说的那样，我强烈建议您将带有类的非常具体的元素作为目标，而不是将 ::after 应用到每个直接到 div 元素。
关于html - Div::使页面不透明后，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53456507/