html - 使用 CSS 的响应式网站 - 在背景图片上添加面板

Question

我有以下CSS，我想在背景图片的下部显示表单面板。

背景图片 CSS 部分:

.ban {
    background: transparent url('../../im.jpg') 0 0 no-repeat fixed;
    text-align: center;
    background-size: cover;
    height: 600px;
    width: 100%;
    margin-bottom: 3em;
    display: table;
}

表单面板 CSS 部分:

.signPanel{
    display: table-cell;
    font-size: 1em;
    margin-top: 0.125em;
    color: white;
    font-weight: 50;

    text-shadow: 0 1px 1px black;
}

HTML部分 图片在这里

    </div>
<form class="signPanel">
        <fieldset>
            <legend>Login</legend>

            <input type="email" placeholder="Email"> <input
                type="password" placeholder="Password"> <label
                for="remember"> 
            </label>

            <button type="submit" class="pure-button pure-button">Sign
                in</button>
        </fieldset>
    </form>

下图将描述我想要实现的目标。

Answer 1

您可以在下面的链接中看到完整的解决方案:

http://jsbin.com/oFeFeFal/1/edit?html,css,output

一个小的 CSS 技巧是将表单或任何东西保留在背景的下部，或者 Parennt 是给容器或 .ban div 在你的情况下的相对位置和表单或任何子元素的绝对位置并应用底部: 0 给它。这将使子元素 float 在其父元素中。