如何在div中更改div的完整背景

Question

div中的

div

如何使用3 <ul>的律师工具包的标题来更改div的背景我希望那个完整的div具有彩色白色背景但似乎只有文本会有彩色白色背景。

这是我的代码

＆＃13;

＆＃13;

body {
  background-image: url('http://my-smashing.smashingapps.netdna-cdn.com/wp-content/uploads/2013/04/blurbackgrounds9.jpg');
  position: relative;
  background-repeat: no-repeat;
  background-size: cover;
}

.container {
  width: 700px;
  height: 425px;
  border-radius: 5px;
  margin: auto;
  margin-top: 10%;
  border: solid;
  border-color: rgba(255, 255, 255, 0.5);
}

.container input {
  margin-bottom: 10%;
  padding-bottom: 2%;
  background: transparent;
  color: #fff;
  border: none;
  border-bottom: 1px solid;
}

.container a {
  text-decoration: none;
}

.container button {
  border: none;
  cursor: pointer;
  font-size: 100%;
}

.inform {
  background-color: #fff;
  float: left;
  width: 60%;
  height: 100%;
}

.inform h1 {
  text-align: center;
}

.inform ul {
  font-family: Impact;
}

.iform {
  margin-top: 10%;
  float: right;
  text-align: center;
  width: 40%;
}

＆＃13;

<div class='container'>
  <form action='' method='POST'>
    <div class='inform'>
      <h1>Lawyer's Kit</h1>
      <ul>
        <li> Backup your files </li>
        <li> Reminder for your appointments </li>
        <li> Secure your data </li>
      </ul>
    </div>

    <div class='iform'>
      <input type='text' name='username' placeholder='UserName'>
      <input type='password' name='password' placeholder='Password'></br>
      <button class='login' value='submit' name='submit'> Log In </button>
      <h5>I forgot my password</h5>
      <button class='bregister' href='register.php'>REGISTER</button>
    </div>

  </form>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您有如何将div高度拉伸到其父级

的问题

解决方案是将position:relative添加到父div， 添加position:absolute;height:100%将解决您的问题。以下代码是工作示例

＆＃13;

＆＃13;

body {
  background-image: url('http://my-smashing.smashingapps.netdna-cdn.com/wp-content/uploads/2013/04/blurbackgrounds9.jpg');
  position: relative;
  background-repeat: no-repeat;
  background-size: cover;
}

.container {
  width: 700px;
  height: 425px;
  border-radius: 5px;
  margin: auto;
  margin-top: 10%;
  border: solid;
  position:relative;
  border-color: rgba(255, 255, 255, 0.5);
}

.container input {
  margin-bottom: 10%;
  padding-bottom: 2%;
  background: transparent;
  color: #fff;
  border: none;
  border-bottom: 1px solid;
}

.container a {
  text-decoration: none;
}

.container button {
  border: none;
  cursor: pointer;
  font-size: 100%;
}

.inform {
  background-color: #fff;
  float: left;
  width: 60%;
  height:100%;
  position:absolute;
}

.inform h1 {
  text-align: center;
}

.inform ul {
  font-family: Impact;
}

.iform {
  margin-top: 10%;
  float: right;
  text-align: center;
  width: 40%;
  
  height:100%
}

＆＃13;

<div class='container'>
  <form action='' method='POST'>
    <div class='inform'>
      <h1>Lawyer's Kit</h1>
      <ul>
        <li> Backup your files </li>
        <li> Reminder for your appointments </li>
        <li> Secure your data </li>
      </ul>
    </div>

    <div class='iform'>
      <input type='text' name='username' placeholder='UserName'>
      <input type='password' name='password' placeholder='Password'></br>
      <button class='login' value='submit' name='submit'> Log In </button>
      <h5>I forgot my password</h5>
      <button class='bregister' href='register.php'>REGISTER</button>
    </div>

  </form>
</div>

＆＃13;

＆＃13;

＆＃13;