如何獲得 100% 高度的背景圖像覆蓋？

Question

我正在使用高度為 5000 像素的圖像，我想讓它在移動和桌面上始終顯示 100% 的寬度和高度以覆蓋背景。

.main {
  position: relative;
  background: url('../images/background.png') no-repeat top center; 
  background-size: cover;
  width: 100%;
}

這段代碼不起作用，它讓她沒有出現。 我總是需要設置一個高度，問題是手機和桌面的高度不同。

所以你可以說..'你可以設置高度：100%'..我做了..但沒有任何反應，圖像不會出現，只有當我用像素設置時。

Answer 1

更新

我覺得有必要更新我的答案，因為我顯然以錯誤的方式理解了這個問題。 我將把舊版本留在底部，因為顯然很多人發現它很有幫助，即使它沒有回答最初的問題。

由於您的背景圖像是重復的，我假設您不想要整個圖像，只需要您需要的任何高度。 所以，你需要兩件事：

所以，這實際上應該對你有用：

.main {
  position: relative;
  background: url('../images/background.png') no-repeat top center; 
  width: 100%;
  height: 100%;
}

如果我的假設是正確的，那么還有一件事：您不需要超過 5000 像素高的背景來實現您的目標，只需將其降低到 1 像素高度（即所需背景的 1 行）並將您的 css 更改為：

.main {
  position: relative;
  background: url('../images/background.png') repeat-y top center; 
  background-size: cover;
  width: 100%;
}

我希望這有幫助

你的.main沒有 height 和height:100%; 不起作用，因為包含它的元素本身沒有高度。

一種可能的解決方案是添加以下內容：

html, body, .main {
  height:100%;
}

這可能正是您所需要的，但您也可能會遇到此解決方案的其他問題。 這一切都取決於您實際想要實現的目標。

其他可能的解決方案：

使用視口單位

.main {
  height:100vh;
}

請注意，某些移動設備對這些的解釋與您的預期不同。

將背景添加到身體本身

body {
  background: url('../images/background.png') no-repeat top center; 
  background-size: cover;
}

正如我之前所寫：很難判斷哪種解決方案最好，這取決於您的目標。

Answer 2

您是否嘗試過添加這種樣式？

html, body{ height: 100%;}

然后添加一個height:100%; 到你的.main div

Answer 3

您正在使用背景圖像...請記住，渲染圖像的大小與圖像本身無關，而是與為包含它而創建的元素有關。

現在，如果您希望圖像以 100% 的高度和寬度顯示，您可以使用屬性background-size: contain ，而不是封面。 這將告訴瀏覽器不應裁剪您的圖像（只要您為 .main 元素設置了高度）。

在我看來，如果您只使用<img>標簽而不是 css 背景，那么您想要的那種效果會更容易實現。

Answer 4

我有一個關於 flex box 無法適應背景高度的問題，下面的代碼適合我。 其余的背景大小、重復和位置取決於您的。

html{
    height:auto;
}
body{
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}