background-attachment: fixed 在iphone设备失效的解决
下面为引用,源代码有点问题,自己修改了一下。先做记录,回头再细修。
引用部分,但代码有问题
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;
}
这个回答的地址如下:
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的背景实际上是不显示的。
可以在新标签中打开图片查看详细内容
background-attachment: fixed 在iphone设备失效的解决的更多相关文章
- 关于iPhone设备不同显示尺寸适配的一些方法
关于iPhone设备不同显示尺寸适配的一些方法 ------关于适配的理解------ 1.什么是适配? 适配是对不同硬件和系统软件的适应,硬件包括屏幕显示,处理器,内存等等(目前主要是屏幕适配, ...
- ios5和ios6横竖屏支持及ipad和iphone设备的判断
ios5和ios6横竖屏支持及ipad和iphone设备的判断 判断是ipad还是iphone设备.此定义在PayViewControllerDemo-Prefix.pch 定义如下: #define ...
- ios7 以后准确获取iphone设备的MAC(物理地址)
通过参考 钉钉 项目,知道是通过wifi拿到路由的MAC地址.那么可不可以拿到iphone 设备的MAC 地址呢? 经过一番搜索,发现所有文章都是针对 ios 7 以前 可以拿到. 而且方法也都是同一 ...
- ios端position为fixed失效的解决办法
关键代码 document.getElementById("searchInputbox").addEventListener('touchmove', handler, {pas ...
- iPhone设备及屏幕适配
// // Common.h // 微信 // // #ifndef Common_h #define Common_h // iPhone设备及屏幕适配 //4的设备 #define KDevice ...
- margin-top失效的解决方法
异常处理汇总-前端系列 http://www.cnblogs.com/dunitian/p/4523015.html 我的是属于这种情况 按照网上的说法,我就是这个现象了 两个层box1和box2,b ...
- 前端问题——png图片在IE6下透明失效,解决办法
今天,一位同事问我问题,png 图片在IE6下透明背景失效. 解决办法,在网上查了很多,最后还是采用两种方案来解决这个问题 1.把这个网页的png格式图片变更为gif格式的图片.问题解决 2.就是让这 ...
- [转]iOS Safari 中click点击事件失效的解决办法
iOS Safari 中click点击事件失效的解决办法 问题起因: 在微信公众号开发(微站)过程中用jquery的live方法绑定的click事件点击无效(不能执行) 问题描述 当使用委托给一个元素 ...
- iOS Safari 中click点击事件失效的解决办法
问题起因: 在微信公众号开发(微站)过程中用jquery的live方法绑定的click事件点击无效(不能执行) 问题描述 当使用委托给一个元素添加click事件时,如果事件是委托到 document ...
随机推荐
- mybatis的缓存简说
一级缓存(不需配置,默认为一级缓存): 1)相当于 sqlsession 级别的缓存 2)当 session 关闭(close)或者提交(commit)后,缓存数据清空 3)当发生insert.upd ...
- Google SketchUp Cookbook: (Chapter 2) Following Paths with Follow Me
软件环境 SketchUp Pro 2018 参考书籍 Google SketchUp Cookbook Follow Me工具 Follow Me工具,将2D图形沿着一条路径挤出生成3D物体. 使用 ...
- 序列化模块_pickle
序列化: 把不能够直接存储的数据变成字节流(bytes)保存在文件, 进行持久化存储 反序列化: 任何数据都可以转成字节流(bytes)进行存储: 1. dumps 把任意对象序列化 li = [1, ...
- Navicat premium 12破解版
下载Navicat Premium 12和破解补丁Navicat_Keygen_Patch,底部有下载地址.下载之后安装Navicat,安装成功后先不要打开,然后打开破解补丁,破解补丁不需要安装,双 ...
- ubuntu10.04换官方源
ubuntu10.04LTS官方已经不再维护,导致部分软件.库文件等下载有问题,可换以下源地址解决问题 deb http://old-releases.ubuntu.com/ubuntu lucid ...
- mysql索引总结(转)
mysql索引总结----mysql 索引类型以及创建 文章归属:http://feiyan.info/16.html,我想自己去写了,但是发现此君总结的非常详细.直接搬过来了 关于MySQL索引的好 ...
- 搭建zookeeper+kafka集群
搭建zookeeper+kafka集群 一.环境及准备 集群环境: 软件版本: 部署前操作: 关闭防火墙,关闭selinux(生产环境按需关闭或打开) 同步服务器时间,选择公网ntpd服务器或 ...
- Android Studio 将文件打包成APK
1.在Build中找到Generate Signed APK选项,进入如下界面 这是我上面已经有了jsk的.创建jks点Create new... 2.没有jks时创建一个 三.然后会返回到上一个界面 ...
- linux/centos elasticsearch 环境搭建 安装 运行 使用
环境搭建也是有些坑的存在,所以整理了一下搭建流程,安全无痛. ElasticSearch是一个开源的分布式搜索引擎,具备高可靠性,支持非常多的企业级搜索用例. 一.java 环境 直接apt安装火箭一 ...
- css中的定位属性