css - 如何改变一个窗体的背景，使它看起来像两个窗体？

Question

下面是我要实现的目标:

这是我目前所拥有的: 我正在使用 Drupal 7。这是测试站点的链接:http://test-caal.gotpantheon.com/

这是一种形式，我想让它看起来像两种形式。有没有办法添加背景图像，使其看起来与我试图实现的目标相同？

感谢您的帮助!

和泉。

Answer 1

jsBin demo

表单允许您使用 <fieldset></fieldset>标签。

类似的东西

<form id="" action="" method="">    
    <fieldset>
        <!-- inputs here -->
    </fieldset>
    <fieldset>
        <!-- inputs here -->
    </fieldset>    
</form>

并相应地设置样式，可能正是您要找的。查看上面的演示链接。

 <form id="" action="" method="">

    <fieldset>
      <h3>Member Login</h3>
      <input type="text" placeholder="Username">
      <input type="text" placeholder="Password">
    </fieldset>
    <fieldset>
      <h3>Partner Login</h3>
       <input type="text" placeholder="Username">
       <input type="text" placeholder="Password">
    </fieldset>   

</form>

基本 CSS:

form h3{
  color:#fff;
  font-family:Helvetica, Arial, sans-serif;
  font-size:1.4em;
  padding:10px 0;
  border-top:2px solid #fff;
  border-bottom:1px solid #fff;
}
fieldset{
  background:#589FCF;
  border: 5px solid #2E2E2E;
  width:180px;
  display:block;
  float:left;
  margin:0;
}
form input[type=text]{
  border:0;
  padding:10px;
  margin-bottom:2px;
}