Html Div：：使页面具有不透明度后_Html_Css

Html Div：：使页面具有不透明度后

html css

Html Div：：使页面具有不透明度后,html,css,Html,Css,我有一个css页面，它不断使我的一个网页与背景图像具有相同的不透明度，但对其他网页没有这样做。我不希望整个页面有不透明度，只有背景。我已经玩过了，但我不太清楚为什么它会在这个页面上玩。唯一不同的是，这个页面有一个表，其他页面要么有表单，要么没有表单。让我知道我是否应该分享一些html。导致它的css： div::after { min-height: 100%; min-width: 1024px; pointer-events: none; width: 100%; h

我有一个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>&nbsp</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是网页的HTML，它的行为不正确？您到底想要实现什么？可能包括你想要的结果的屏幕截图。你应该分享足够的HTML和CSS，让我们重现这个问题。使用a是实现这一目标的一个好方法。请注意，您的HTML中缺少许多括号，并且您正在使用不推荐使用的与外观相关的属性bgcolor，align，这可能会干扰您的CSS。在您将伪元素添加到页面上的每个可能的div之后，请使用div:：。这是非常糟糕的做法。首先，如果您只需要一个背景，我看不出有任何理由在CSS中有背景图像时使用伪元素。如果出于某种原因，您必须在特定元素上使用pseudo:：after，理想情况下，将其作为类的目标。