背景图片在移动设备上

我试图创建一个引导程序响应网站，并使用背景图片为我的网站的整个身体模糊。我用我的背景图像，并将其设置为不“重复中心中央固定”和背景大小为“盖”，如下：背景图片在移动设备上

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/看看与狒狒的图像 –

背景图片在移动设备上

回答

相关问题