一、问题

一个网站中使用了 background-attachment:fixed; 来控制背景图不随内容的滚动而滚动,使其固定大小。

我的背景图是作用在 body 上的。

在PC端可以起作用和一些安卓的机器上能够起作用,但是在iphone上没有效果。

二、原因

网上看了很多,都只说怎么解决,解决方法也有好用和不好用的,但是没有人解释为什么。

在 stackoverflow 上查找的时候发现的原因如下:

Fixed-backgrounds have huge repaint cost and decimate scrolling performance, which is, I believe, why it was disabled.

固定背景导致重绘的成本很高,并且滚动表现也不尽人意,所以在一些移动端是被禁止的。

三、解决

移动无法直接应用 background-attachment ,可以曲线救国。

有的推荐使用 javascript 去计算固定位置的,不过我采用的是 css 直接来控制,通过 :before 来控制:

/*body 背景*/
body{
    background-image: url(__PUBLIC__/images/bg/bg1.jpg);
    background-repeat: no-repeat;
    -webkit-background-size:100%;
    background-size:cover;
    -webkit-background-size: cover !important; 
    -moz-background-size: cover !important; 
    -o-background-size: cover; 
    background-attachment:fixed;
    padding-top: 70px;
}
/* 移动端响应*/
@media screen and (max-width:767px){
    body{background-position: -99999px -99999px;}
    body:before {
        content: ""; 
        background-image: inherit; 
        position: fixed; 
        top: 0; 
        left: 0; 
        height: 100vh; 
        width: 100%; 
        -webkit-background-size: cover !important; 
        -moz-background-size: cover !important; 
        -o-background-size: cover; 
        background-size: cover !important;
        z-index: -1;
    }
}

这个回答的地址如下:

stackoverflow 的回答中使用的 height 的单位是 vh,相对于窗口的单位,100vh 自然是整个窗口,不过我因为作用在 body 上,所以用的是 height:100%

原理:

1. 使用 background-position:-9999px,-9999px 来隐藏原来的body的背景图

2. 使用 :before 在body之前添加内容

3. 实际上 :before 添加的内容中 background-image:inhert使用的是body的背景图,并且使用 fixed 定位,宽高为100%.

4. 将 :before 的z-index 设置为 -1 ,置于其他内容之下,这样子,会显示body:before的背景,body的背景实际上是不显示的。

n-1.jpg

可以在新标签中打开图片查看详细内容