使用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的相对位置设置为表单或任何子元素的绝对位置并应用bottom： 0到它。这将使子元素浮动到其父元素中。