Question

我到处寻找，似乎没有解决我的问题。这是HTML，它只包含一个纯HTML登录表单：

＆＃13;

body{
  background-image:url(http://i63.tinypic.com/raytyu.jpg);
  background-size:cover;
  background-repeat: no-repeat;
}
.h1Tag{
  padding: 0px;
  font-size: 150%;

  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
  color: #fff;
}
ul{
  list-style-type:none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #b2e0ef;
}
li{
  float: center;
}
a:hover:not(.active) {
  background-color: #3399ff;
  text-decoration:none;
}
li a{
  display: block;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  color: white;
  font-weight:bold;
}
/*-----------LOGIN FORM CSS-------------------*/
#login_form{
  background-color: rgba(178,224,239,0.6);
  position:center;
  padding: 20px;
  position: absolute;
  margin-left: 550px;
  margin-right: 550px;
  margin-top: 150px;
  border-radius:3px;
  border: 1px solid;
  border-color: #fff;
}
.login_form{
  text-align:center;
  font-size: 20px;
}

＆＃13;

<div id="login_form">
  <div class="h1Tag">
    <h1>MyGarden</h1>		
  </div>
  <div class="login_form">
    <input type="text" name="email" id="email" placeholder="Email address"><br>
    <input type="password" name="password" id="password" placeholder="Password"><br><br>
    <button type="submit" id="submit" name="submit">Log In</button>
  </div>
</div>

＆＃13;

目前，当我在Google Chrome中启动此功能时，背景和登录表单会正确放置在完全最大化的Chrome窗口中。但是，当我调整窗口大小时，背景会减少并保留在窗口的左上角，而登录表单位于页面的右侧。

登录框div位于#login_form下，背景位于正文CSS类中。

Answer 1

编辑以下2个css内容，

设置html的背景而不是body，将高度设置为100％，如果你设置background-size：100％100％;然后它将拉伸并占据100％的屏幕如果你设置背景大小：封面，那么将显示足够的图像部分，而不是图像的整个部分，不会拉伸图像
1。

html {
    background-image: url(http://i63.tinypic.com/raytyu.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    height: 100%;
}

不要在px中设置边距，以％为单位设置设置框的宽度并删除px边距删除位置，这里不需要

2

#login_form {
    background-color: rgba(178,224,239,0.6);
    position: center;
    padding: 20px;
    /* position: absolute; */
    margin-left: auto;
    margin-right: auto;
    margin-top: 10%;
    border-radius: 3px;
    border: 1px solid;
    border-color: #fff;
    width: 235px;
}

Answer 2

使用下面的css，链接到最后一次尝试更改图片网址的代码簿，如果它不起作用

    body{
  background:url(https://pixabay.com/static/uploads/photo/2014/01/22/19/44/flower-garden-250016_960_720.jpg) no-repeat center center;
  background-size:cover;
}
.h1Tag{
  padding: 0px;
  font-size: 150%;

  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
  color: #fff;
}
ul{
  list-style-type:none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #b2e0ef;
}
li{
  float: center;
}
a:hover:not(.active) {
  background-color: #3399ff;
  text-decoration:none;
}
li a{
  display: block;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  color: white;
  font-weight:bold;
}
/*-----------LOGIN FORM CSS-------------------*/
#login_form{
  background-color: rgba(178,224,239,0.6);
  padding: 20px;
  position: relative;
  margin-left: auto;
  margin-right: auto;
  margin-top: 150px;
  border-radius:3px;
  border: 1px solid;
  border-color: #fff;
  width:250px;
}
.login_form{
  text-align:center;
  font-size: 20px;
}

http://codepen.io/anon/pen/MeYOBx

Answer 3

试试这个：

#login_form {
background-color: rgba(178,224,239,0.6);
position: center;
padding: 20px;
/* position: absolute; */
/* margin-right: 550px; */
/* margin-top: 150px; */
border-radius: 3px;
border: 1px solid;
border-color: #fff;
margin: 150px auto;
width: 236px;
}

Answer 4

https://jsfiddle.net/3j3wcypx/

在您的HTML中

我只是添加两个divs作为您.login_form的父母，并将background提供给超级parent

<div class="container">
  <div class="login">
    <div id="login_form">
      <div class="h1Tag">
        <h1>MyGarden</h1>       
      </div>
      <div class="login_form">
        <input type="text" name="email" id="email" placeholder="Email address"><br>
        <input type="password" name="password" id="password" placeholder="Password"><br><br>
        <button type="submit" id="submit" name="submit">Log In</button>
      </div>
    </div>  

  </div>  
</div>

和css我从#login_form移除了边距，并将其display:inline-block给了它，因此它将水平居中，其父.login diplay:table-cell垂直居中：

.container{
  background-image:url(http://i63.tinypic.com/raytyu.jpg);
  background-size:cover;
  background-repeat: no-repeat;
  position:absolute;
  top:0;
  right:0;
  width:100%;
  height:100%;
  display:table;
}
.login{
  display:table-cell;
  vertical-align:middle;
  text-align:center;
}
.h1Tag{
  padding: 0px;
  font-size: 150%;

  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
  color: #fff;
}
ul{
  list-style-type:none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #b2e0ef;
}
li{
  float: center;
}
a:hover:not(.active) {
  background-color: #3399ff;
  text-decoration:none;
}
li a{
  display: block;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  color: white;
  font-weight:bold;
}
/*-----------LOGIN FORM CSS-------------------*/
#login_form{
  background-color: rgba(178,224,239,0.6);
  position:center;
  padding: 20px;
  border-radius:3px;
  border: 1px solid;
  border-color: #fff;
  display:inline-block;
}
.login_form{
  text-align:center;
  font-size: 20px;
}

如何使背景响应并使内容保持中心？

4 个答案: