Question

我有一个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>

所以底部图片是现在的样子，它与背景具有相同的不透明度，但我只希望背景具有它，而不是内容。上面的图片是另一个页面的外观，我希望它看起来像这样。

Answer 1

@jackie，它并不是使所有内容都透明，但是图像实际上位于页面内容的“ 上方”上，因此也使其看起来不透明。您的解决方案是将z-index个伪元素中的::after设置为-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元素。

Div ::使页面不透明后

1 个答案: