下面为引用，源代码有点问题，自己修改了一下。先做记录，回头再细修。

引用部分，但代码有问题

http://www.ptbird.cn/css-background-attachment--fiexed-no-work.html

一、问题

一个网站中使用了 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{

    background-image: url(../img/wxfwh_bg_body.jpg);

    background-repeat: no-repeat;

    background-size:cover;

    -webkit-background-size: cover !important;

    -moz-background-size: cover !important;

    -o-background-size: cover;

    background-attachment:fixed;

    z-index: -1;

}

body:before{

    content: "";

    position: fixed;

    z-index: -1;

    top:;

    right:;

    bottom:;

    left:;

    background-image: inherit;

    -webkit-background-size: cover!important;

    -o-background-size: cover;

    background-size: cover!important;

}

这个回答的地址如下：

• https://stackoverflow.com/a/36793965/7630229

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的背景实际上是不显示的。

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

最新文章

1. Windows netstat 查看端口、进程占用
2. ThinkPHP登录功能代码
3. Bootstrap 表单和图片 （内联表单，表单合组，水平排列，复选框和单选框，下拉列表，校验状态，添加额外的图标，控制尺寸，图片）
4. C#里面比较时间大小三种方法
5. C语言练习题_邮票组合
6. C#中各种计时器
7. 富文本编辑器 - wangEditor 插入代码
8. iOS 开发小技巧
9. Spring注解：@Resource、@PreConstruct、@PreDestroy、@Component
10. Mysql字符集修改为UTF8
11. nginx cpu高排查
12. SpringBoot学习之启动探究
13. 谈谈axios配置请求头content-type
14. docker容器网络
15. [Swift]LeetCode971.翻转二叉树以匹配先序遍历 | Flip Binary Tree To Match Preorder Traversal
16. MATLAB 中 ksvdbox和ompbox 工具箱的安装和使用
17. MySQL批量更新字段url链接中的域名
18. 我的Java之旅 第八课 Servlet 进阶API、过滤器与监听器
19. HDU 2011 多项式求和
20. 最详细安装Esxi

热门文章

1. ubuntu16.04上vue环境搭建
2. 用最简单的话告诉你什么是ElasticSearch
3. 【转】sqlserver使用sql导出索引
4. 一次请求中，经过 nginx+uWSGI+flask应用程序搭建服务的执行过程
5. Appium自动化学习1
6. Maven 下载、安装、配置学习
7. 【python】django上传文件
8. 设计一函数，求整数区间[a,b]和[c,d]的交集
9. 电脑开机出现intel UNDI，PXE-2.1（build 003），是怎么回事？
10. java面试题复习（一）