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

我有以下CSS，我想在背景图像的下部显示表单面板。使用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>

下面的图片会描述一下我想要实现。

The intended result

来源

2014-01-27 sharon Hwk

请加小提琴.. –

在这里你去...我为你创造了一个小提琴。如果你想移动div，我建议你使用position：relative和css顶部。 http：//jsfiddle.net/5AzAa/2/...就像@SamiraKhorshidi说的那样，下次请添加小提琴。 – Minelava

@Minelava出于某种原因，您的解决方案无法正常工作。面板显示在黑色区域。 –

你可以看到下面链接的完整解决方案：

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

小CSS窍门是保持形式或任何事情的背景下段或Parennt是给相对位置到容器或.ban div在你的案例和绝对位置的形式或任何子元素，并应用底部：0到它。这将使子元素在其父项内浮动。

来源

2014-01-27 13:40:01

这会有所帮助，但是如何获取表单面板到图像中间。我的意思是中心的形式面板。这里是我的小提琴http://jsbin.com/oFeFeFal/3/ –

创建另一个形式的容器，并使用CSS中心，请点击此处：http://jsbin.com/oFeFeFal/4/ –

对不起，但我有点新对此。你是否硬编码'346px'。我可以将它居中而不用硬编码吗？ –

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

回答

相关问题