CSS：全尺寸背景圖片

試圖讓全尺寸背景圖片：CSS：全尺寸背景圖片

html { 
    height: 100%; 
    background:url('../img/bg.jpg') no-repeat center center fixed; 
    background-size: cover; 
}

它顯示有正確的寬度，但高度的背景圖像被拉伸。我嘗試了各種選項，如

html { 
background:url('../img/bg.jpg') no-repeat center center fixed; 
background-size: 100% auto; 
-webkit-background-size: 100% auto; 
-moz-background-size: 100% auto; 
-o-background-size: 100% auto;

}

去除height: 100%

，但沒有一次成功。

來源

2012-12-27 Himanshu Yadav

這個CSS當你說拉伸，你的意思是圖像的形狀失真，或圖像的頂部和底部被切關閉？你嘗試過哪些瀏覽器？ –

圖像的分辨率是多少？ – Vucko

一個生動的例子會很棒。 – Omega

你的屏幕顯然是不同的形狀，以你的形象。這並不罕見，即使您的屏幕具有相同的形狀（縱橫比），您也應該始終迎合這種情況，因爲其他人的屏幕並不總是如此。要解決這個問題，您只有以下三種選擇之一：

您可以選擇完全覆蓋圖像的屏幕，但不會扭曲圖像。在這種情況下，您需要應對圖像邊緣將被切斷的事實。對於這種情況，請使用：background-size: cover
您可以選擇確保整個圖像可見，而不是扭曲。在這種情況下，您需要警惕一些背景不會被圖像覆蓋的事實。處理這個問題的最好方法是爲頁面提供一個堅實的背景，並設計您的圖像以淡入實體（儘管這並非總是可行）。對於這種情況，請使用：background-size: contain
您可以選擇使用背景覆蓋整個屏幕，並使其適合。對於這種情況，請使用：background-size: 100% 100%

來源

2012-12-27 19:06:32

通過限制圖像的最小尺寸（例如'min-height：700px;'），您可以部分避免圖像寬高比失真。 – ecoe

大部分時間我都使用第一個選項'background-size：cover'和媒體查詢，這些查詢服務於該圖像的不同寬高比。 –

嘗試用含有代替蓋，然後居中：

background-size: contain; 
background-position: center;

來源

2012-12-27 18:39:26 vGichar

即使我刪除這兩個屬性，它也給了我相同的結果。沒有爲我工作。我想涵蓋完整的背景。 –

你確定圖片本身沒有拉伸，不管html嗎？ – vGichar

檢查background-url屬性。 –

更好的解決方案可能是使用輕量級的jQuery插件來動態調整瀏覽器網站的背景大小。我真的很喜歡backstretch.js。他們實施起來非常簡單。

來源

2012-12-27 19:14:42 rentageekmom

您應該使用body作爲選擇器而不是html，這會導致您的標記問題。您的代碼如下：

html { 
    height: 100%; 
    background:url('../img/bg.jpg') no-repeat center center fixed; 
    background-size: cover; 
}

我會嘗試這樣的：

body { 
    background:url('../img/bg.jpg') no-repeat 50% 0 fixed; 
    margin: 0 auto; 
}

你不應該指定圖像的尺寸。

來源

2012-12-27 19:19:04 squashriddle

background: url(images/bg.jpg) no-repeat center center fixed; 
-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover; 
background-size: cover;

來源

2014-03-04 08:51:21

我有同樣的問題，我用body

background: url(image.jpg); 
    background-color: rgba(0, 0, 0, 0); 
    background-position-x: 0%; 
    background-position-y: 0%; 
    background-size: auto auto; 
background-color: #0a769d; 
height: 100%; 
min-height: 100%; 
max-height: 100%; 
width: 100%; 
background-size: 100% 100%; 
background-position: center; 
max-width: 100%; 
min-width: 100%; 
top: 0; 
left: 0; 
padding: 0; 
margin: 0;

來源

2017-06-21 01:53:22

CSS：全尺寸背景圖片

回答

相關問題