背景圖片在移動設備上

我試圖創建一個引導程序響應網站，並使用背景圖片爲我的網站的整個身體模糊。我用我的背景圖像，並將其設置爲不「重複中心中央固定」和背景大小爲「蓋」，如下：背景圖片在移動設備上

body{ 

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

     }

所以這看起來在Chrome，火狐，IE OK，但是當我打開它任何移動設備的背景圖像都非常模糊。我已經嘗試了很多來自不同來源的選項，但沒有運氣，因爲這是我的第一個網站，所以我在這裏非常掙扎。我真的很感激，如果有人可以擺脫一些光線，所以我可以解決這個問題。

這是它的外觀在手機上 my site

來源

2017-09-04 AtlantisNaranja

當我們在通過開發者工具模擬器手機像素寬度值的任何網站都是由一系列320像素的iPhone5的，640x360像素的諾基亞N9，三星S3，注3等，但這是真的嗎？這可不是好當談到對字體大小和圖像，因爲這些設備具有更高的dpi和您需要考慮到這一點，對於您的問題與背景圖像使用此

@media screen and (min-resolution: 1.5dppx) { 
.welcome-header > h1{ 
    background-image: url('../images/html5_384x384.png'); 
} 
} 

@media screen and (min-resolution: 2dppx) { 
.welcome-header > h1{ 
    background-image: url('../images/html5_512x512.png'); 
} 
}

使用更高分辨率的圖像您背景爲這2 DPPX範圍

一個很好的指導直接從開發者鉻https://developer.chrome.com/multidevice/webview/pixelperfect

來源

2017-09-04 19:02:52

我已經試過您的解決方案，但我不這樣做是正確的或似乎不工作。這真的讓我很生氣，呵呵。 – AtlantisNaranja

你可以在舞臺上做出改變並通知我嗎？ –

您對所有的dppx單位都使用相同的圖像，您需要使用3個不同的圖像以及各自的像素密度。 https://www.html5rocks.com/en/mobile/high-dpi/看看與狒狒的圖像 –

背景圖片在移動設備上

回答

相關問題