html - 背景和相对定位 html 和 css 问题

Question

我对 html 和 css 有疑问。

今天，我第一次尝试制作一个以大图像为背景的页面。

我正在使用基础框架，但我坚持做一件事。正如我们所知，foundation 是一个自适应框架，当我调整浏览器大小时，我遇到了一个错误。

你可以在我的截图上看到它:https://imgurhd.ru/i/270a.jpg (您也可以在这里找到我的 CSS)。

我需要使菜单下的文本和图像在任何屏幕尺寸上垂直居中。

如您所见，我正在使用具有百分比值的相对位置。所以请帮我找出问题所在。

Answer 1

您可以将背景大小设置为 cover .

Cover This keyword specifies that the background image should be scaled to be as small as possible while ensuring both its dimensions are greater than or equal to the corresponding dimensions of the background positioning area.

html { 
  background: url(/*YOUR IMAGE HERE*/) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

这在 most recent browsers 中得到支持