如何在一頁布局中顯示背景圖像的全高？

Question

我試圖將完整的背景圖像顯示為登錄頁面，然后當用戶向下滾動時顯示內容，但是背景圖像的底部通常被切斷（取決於瀏覽器分辨率）。

我想：

background-attachment: fixed;
background-size: cover;

這是一個演示問題的代碼筆：

https://codepen.io/suez/full/wulBv/

您可以看到第一張帶有鋼鐵俠的圖像的底部被切掉了。 這是完整圖像（ https://i.imgur.com/PbV1Grl.jpg ）。

有沒有辦法顯示圖像的全高？ 即使您需要向下滾動才能看到它？

Answer 1

使用CSS：

background-size: 100% 100%;

Answer 2

您可以添加background-position: bottom

https://codepen.io/anon/pen/XMMVYo

在大多數情況下，它不會顯示完整高度，但會顯示圖像的底部。

或者你使用background-size: contain和（在這種特殊情況下）將它與白色背景色結合起來

編輯：白色不起作用，我看起來不夠近。 這大概是我的意思，但它並不是真正令人滿意，因為圖像的邊框不只有一種顏色：

Answer 3

您可以使用具有100%高度和寬度的background-size 。

消除

background-size:cover;

用。。。來代替：

background-size:100% 100%;