CSS3 - （背景尺寸：汽車100％） - 意外行爲

我現在有下面的CSS（稱爲splash.css）：CSS3 - （背景尺寸：汽車100％） - 意外行爲

html { 
    background:url(splash.jpg) center no-repeat; 
    background-size:auto 100%; 
}

而下面的HTML：

<!DOCTYPE html> 
<HTML> 
    <HEAD> 
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> 
     <TITLE>Test</TITLE> 
     <link href="splash.css" rel="stylesheet" type="text/css" media="screen" /> 
    </HEAD> 
    <BODY> 
    </BODY> 
</HTML>

我試圖讓名爲splash.jpg的背景圖像始終具有與瀏覽器窗口相同的高度，並調整其大小（保持其縱橫比），並允許某些寬度保持在瀏覽器窗口之外。另外，背景必須以瀏覽器窗口爲中心。

目前我希望我的CSS能夠完成它應該做的事情。我已將背景設置爲水平和垂直對齊中心，並將其設置爲應該的圖像。我還將背景大小設置爲自動100％ - 根據Mozilla Developer Network，將圖像大小調整爲與我希望的大小相同。

如果背景尺寸具有一個汽車部件和一個非汽車部件：如果圖像的特性的比例，然後使用指定的尺寸使其和從指定的尺寸和計算出其他尺寸內在比例。如果圖像沒有固有比例，則使用該維度的指定尺寸。對於其他維度，使用圖像的相應固有維度（如果有）。如果沒有這種固有尺寸，請使用背景定位區域的相應尺寸。

我現在面臨的問題是，這個巨大的，1920×1080圖像的高度，似乎只圍繞50px的，當我在瀏覽器窗口中打開HTML。寬度也似乎與高度成正比。起初，我覺得它可能是某種瀏覽器相關的錯誤 - 但是這個頁面在Chrome和Firefox中看起來幾乎完全一樣！

注 - 歡迎任何其他SIMPLE解決方案。我不希望這種行爲是依賴Javascript的 - 但我不介意這種解決方案只能在最新版本的FF/Chrome中使用。

來源

2012-06-26 Shariq

如果向頁面添加更多內容，背景也會出現。 – matpol

將height: 100%;添加到您的html款式中。

來源

2012-06-26 17:02:01

哇。非常感謝。有效。我認爲我有身高：100％在他們早些時候，然後我刪除了它......猜猜問題是背景填充的元素不填滿屏幕？ – Shariq

'html，body {height：100％; } IDK爲什麼但我總是在假設你需要設置身體以及HTML，因爲兩者都不能保證有一個高度。 – rlemon

@rlemon由於背景被應用到'html'元素，所以'body'的高度是完全沒有區別的。 –

只要使用此：

body { background-size: cover; }

這是覆蓋與背景圖像頁面中的CSS3屬性。我忘了它是否保持了完美的寬高比，但它值得一拍，哥們。

來源

2012-06-26 17:06:39

是的，也嘗試過 - 見Kolink的答案，這工作。封面也在做一些奇怪的事情，因爲我的元素沒有覆蓋頁面，而背景只能覆蓋元素。更重要的是，封面並不能解決全高度始終顯示爲100％的問題 - 可能無法顯示全高（例如，只有圖像的一半，高度方面）。我希望在任何時候都能看到整個高度。 – Shariq

此屬性是上帝派，謝謝@Mike :) – Ozzy

background: url('/img/bg0.jpg') no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale'); -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";">

來源

2013-11-27 01:58:57 ALEXANDER

CSS3 - （背景尺寸：汽車100％） - 意外行爲

回答

相關問題