Question

这是我的CSS课程

   .parallax {
         background: url(../images/indexParallax.png) no-repeat center center fixed; 
         display: table;
         height: 100%;
         position: relative;
         width: 100%;
         -webkit-background-size: cover;
         -moz-background-size: cover;
         -o-background-size: cover;
         background-size: cover;
         overflow: hidden;
}

在台式电脑和Android手机上，此视差显示正确。但是当涉及到iPhone（4和5和6）时，就会出现问题。显示图像但未正确缩放背景图像。

有什么想法吗？感谢。

Answer 1

我自己没试过，但这是一个假设的解决方案

-webkit-background-size: 100%; 
-moz-background-size: 100%; 
-o-background-size: 100%; 
background-size: 100%; 
-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover; 
background-size: cover;

基本上，如果浏览器无法使用封面，那么它将采用100％，这应该提供类似的结果。

iOS上的

background-size: cover;为bugged

iPhone上的背景图像无法正确显示（居中）

1 个答案: