使用伪元素::之前在Div中显示低不透明度背景图像

Question

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

jsFiddle of my code

我关注this SO answer（答案＆＃39; Codepen为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开发工具查找问题：

在元素窗格中，找到并选择：after pseudo-element

在视图窗格中，将显示工具提示。它表示元素id，大小为：0px x 0px。 这就是它不可见的原因。

Answer 2

添加：

width: 100%;
height: 100%;

到#formDIV:after。

作为旁注，具有可读代码非常重要，特别是对于调试。慷慨地使用新的线条，空格，缩进和评论！