Question

我的网站的背景图片在Chrome和Safari中使用background-size：cover进行了很好的调整，但是当我在ipad或iphone上测试我的网站时，CSS背景图像实际上已经放大并且看起来很糟糕。我在这里读到了很多关于此问题的其他问题，但没有一个问题能解决我的问题。

HTML

<div class="background"> 

</div><!--background-->

.background没有容器，屏幕宽度为100％。

CSS

.background {
    height:600px;
    width:100%;
    position:relative;
    background: url(css/img/strand.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

Answer 1

我有同样的问题，我使用SCROLL而不是FIXED。

background-attachment:scroll;

Answer 2

显然，iPad的Safari是downsampling图像，高于1024px阈值。我曾尝试使用scroll代替fixed，但这并不成功。 Other tricks也不适合我。

我solved this将原本太大的1600×1600图像分割成两个图像。因此，我能够使用两个1024px大小的图像，并获得比以前更好的可读性。

也许像这样的解决方法也适合你。

CSS背景图片在iPad和iPhone上调整不正确。

2 个答案: