css - 使用伪元素::before在Div中显示低不透明度背景图片

Question

向 DIV 添加背景图像。图像必须具有低不透明度，但 DIV 中的其他元素必须具有正常不透明度。

jsFiddle of my code

我正在关注 this SO answer (答案的代码笔是 here )。

但是，我一定做错了什么(了解我，一些非常明显的事情)。谁能发现我的错误或提出解决方案？

如果有一天我上面的 jsFiddle 消失了，这是我的代码:

HTML:

<div id="loginFormDIV">
    <div id="headerDIV">
        <p>Login Please</p>
    </div>
    <div id="formDIV">
        <div id="fd_loginDIV">
            <p>Login ID:</p>
            <input id="fd_login" type="text" />
        </div>
        <div id="fd_pwordDIV">
            <p>Password:</p>
            <input id="fd_pword" type="password" />
        </div>
        <div id="fd_submitDIV">
            <input id="fd_submit" type="button" value="Submit" />
        </div>
    </div>
</div><!-- #loginForm -->

CSS:

* { margin: 0; padding: 0; outline: 0 }
html {min-height:100%;margin-bottom:1px;font-size: 62.5%;background:#eaeaea;}
h1, h2, h3 {color:#f1f0ee;font-family:Segoe UI Light, Arial, Verdana, Geneva, sans-serif;font-family:"Segoe UI light","Segoe UI";}
h1 {font-size:2.5em;font-weight:normal;border-bottom:0px solid #c6beaa;padding-bottom:25px;}

#loginFormDIV {height:250px;width:400px;position:absolute;left:30%;font-size:1.6em;z-index:10;}

#headerDIV {height:40px;width:100%;background:white;}
#formDIV   {height:210px;width:100%;position:relative;}
#formDIV:after{content:'';display:block;position:absolute;top:0;left:0;background:url(http://placekitten.com/400/250);background-size:cover;opacity:0.2;z-index:-2;}
    #fd_loginDIV  {height:35%;width:80%;margin:0 auto;border:1px solid blue;}
    #fd_pwordDIV  {height:35%;width:80%;margin:0 auto;border:1px solid red;}
    #fd_submitDIV {height:25%;width:35%;float:right;border:1px solid orange;}
    #fd_loginDIV p{}
    #fd_pwordDIV p{}
    #fd_login     {height:40px;width:60%;}
    #fd_pword     {height:40px;width:60%;}
    #fd_submit    {}

Answer 1

如何使用 Chrome 开发者工具找出问题:

在元素 Pane 中，找到并选择 :after 伪元素

在 View Pane 中，会出现一个工具提示。它表示元素 id，大小:0px x 0px。这就是它不可见的原因。