居中背景圖像在移動Safari瀏覽器，風景*和*肖像（iPhone/iPad）

我有一個1024 x 1024像素的背景圖像;這些尺寸的原因是我希望圖像覆蓋在風景和肖像模式中的屏幕。圖像的中央有一個小徽標，但它不是簡單的漸變。我希望圖像始終居中;換句話說，標誌必須始終位於屏幕中央，在風景和風景方向。我也希望覆蓋整個屏幕的圖像，但不希望背景圖像創建不必要的滾動條;所以我不希望它有可能通過在屏幕上拖動圖像來移動圖像。居中背景圖像在移動Safari瀏覽器，風景*和*肖像（iPhone/iPad）

這是我曾嘗試（和這個例子的目的，我只是使用了HTML的樣式標籤）：

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF8" /> 
<title>Test</title> 
<style> 
    html,body { 
     width:100%; 
     height:100%; 
    } 
    body { 
     background-image: url('../img/background.jpg'); 
     background-position:center; 
     background-attachment:fixed; 
     background-repeat:no-repeat; 
    } 
</style> 
</head> 
<body> 
Hello world.   
</body> 
</html>

這裏的代碼的問題是圖像不居中（在肖像模式下標識顯示在屏幕右側，橫向位於屏幕底部）。它也似乎是背景圖像成爲頁面內容的一部分，因此它會導致滾動條，這意味着圖像可以左右拖動。

我更喜歡一個只是CSS和html的解決方案，但如果它能夠工作，將會接受一個帶有Javascript的解決方案。請不要在這裏提及與其他瀏覽器有關的問題，我在這個問題中特別提到了Mobile Safari。我已嘗試在各種答案中提出的建議LOT，我還沒有找到可在Mobile Safari中正常工作的解決方案。

因此，這裏又是我的要求，以點形式：

背景圖像總是覆蓋整個屏幕（不帶空格的表現）
圖像始終圍繞（所以溢出均勻左右/頂部之間劃分和底部）時的iPad橫向和縱向
背景圖像是固定的（不可移動）
之間優選的溶液使用旋轉
圖像撐中心只是HTML和CSS（CSS3也很好）

Anwyone知道如何做到這一點？

更新：

這個問題可能存在於電腦和椅子之間！ ;）我將在我的UIWebview中解決問題時發佈更新。

好的。已確認。這裏沒有什麼可看的！ :)這個問題是我自己做的，我提供的HTML實際上工作正常。這出錯了，因爲被加載的HTML是一個錯誤屏幕，並試圖「僞造」錯誤情況，我導致了UIWebview在準備好之前加載的實際錯誤。當我在正確的時間加載HTML時，中心突然起作用，滾動條消失。一切都是100％。

來源

2012-06-26 BruceHill

背景圖片沒有高度和寬度，它們的高度和寬度取決於它們應用於父級的高度和寬度。所以背景圖片不可能創建滾動條。

如果您希望背景圖像取決於屏幕尺寸調整，使用此：

background-size: cover;

來源

2012-06-26 17:10:42

謝謝你的贊成票。希望這對你有用。如果沒有，請回複評論，我會繼續努力。同樣，我沒有測試這一點，我很少使用護罩參數，但我知道它涵蓋了整個頁面，我只是不敢肯定它是如何保持圖像的比例。 –

謝謝，邁克。嗯，我還以爲背景圖片不應引起滾動條，並且從測試確實看來你說得對滾動條。我的HTML是一個UIWebView中顯示，似乎我有一個問題在我的UIWebView是導致滾動條以及可能的錯位中心爲好。在我用web視圖解決了我的問題後，我會回到這個問題。有沒有一個尷尬的笑臉，我可以用在stackoverflow？哈哈;） – BruceHill

哦，不尷尬必要:)我張貼在這裏令人難以置信的愚蠢的問題並獲得時而訓斥哈哈。這是一個有效的問題。 –

居中背景圖像在移動Safari瀏覽器，風景和肖像（iPhone/iPad）

回答

居中背景圖像在移動Safari瀏覽器，風景*和*肖像（iPhone/iPad）

回答

相關問題

居中背景圖像在移動Safari瀏覽器，風景和肖像（iPhone/iPad）