Question

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

.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>

Answer 1

此规则

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;

}

Answer 2

你的CSS是对的。

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

SELECT * FROM table 
WHERE [col] like '%AABCC' --match on entire target string
OR [col] like '%ABCC'     --match on last 4 chars of target string
OR [col] like '%BCC'      --match on last 3 chars of target string
OR [col] like '%CC'       --match on last 2 chars of target string
OR [col] like '%C'        --match on last 1 char of target string
;

或使用Normalize.css

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

这将在未来为您提供很多帮助：）

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

2 个答案: