没有滚动条的可调整大小的背景图像答案

【问题标题】：Resizeable background image without a scroll bar没有滚动条的可调整大小的背景图像
【发布时间】：2016-09-28 06:54:20
【问题描述】：

我正在尝试制作一个静态页面，全屏时您将永远无法滚动。我只希望我的表单居中并且背景图像随着窗口的大小而变化。我是初学者，如果这真的很明显，我很抱歉。

.container {
  display: flex;
  justify-content: center;
  /* center horizontally */
  align-items: center;
  /* center vertically */
}
.trans {
  background: rgba(1, 1, 1, 0.6);
}
body {
  height: 100%;
}
.height {
  height: 100%
}
html {
  height: 100%;
  background: url(wallpaper.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

<div class="container height">
  <form id="form">
    <input class="trans text" type="password" name="Password">
    <button type="submit">Submit</button>
  </form>
</div>

【问题讨论】：

别忘了重置body的默认边距stackoverflow.com/questions/13127887/html-default-body-margin

标签： html css image scroll background

【解决方案1】：

你的 CSS 是正确的。

始终开始通过重置一些 CSS 属性来创建网站：

* {
    margin: 0px;
    padding: 0px;
    max-width: 100%;
    box-sizing: border-box;
    -webkit-font-smoothing: subpixel-antialiased;
}

或使用Normalize.css

为什么？因为每个浏览器都提供自己的默认 CSS，所以我们需要添加我们的。

这将在未来帮助你很多:)

【讨论】：

【解决方案2】：

这条规则

html {

    height: 100%;
    background: url(wallpaper.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;

}

必须改为应用于body 标签：

body {
    height: 100%;
    background: url(wallpaper.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;

}

【讨论】：