我正在尝试在iOS上为学校项目提供固定背景图像div.我一直在用
background-attachment: fixed;
Run Code Online (Sandbox Code Playgroud)
但这导致了移动游猎中的奇怪尺寸和滚动效果.这是我正在使用的网站 ; 我目前用于引用div图像背景的方法在桌面上运行良好但在iOS上完全失败.
不知何故,http: //www.everyonedeservesgreatdesign.com 得到了这个工作.我在跟踪代码时遇到了困难,因为他们正在使用某种类型的方形空间模板,但看起来他们正在将图像放入一个position:fixed以某种方式被position:relative其父div 剪切的div中.我的印象是不可能position:fixed用视口以外的任何东西来剪切div,所以我很好奇这里发生了什么.
关于如何在我的网站中为固定图像div背景实现此方法的任何想法?
我有一个项目,我正在使用固定的背景图像.它适用于除ios7之外的所有功能.在ipad上,背景图像被放大并且模糊.这是我正在使用的CSS代码 -
.header {
display: table;
height: 100%;
width: 100%;
position: relative;
color: #fff;
background: url(../images/boston2.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Run Code Online (Sandbox Code Playgroud)
这是实时页面的链接 - www.wdeanmedical.com
我错过了什么?
有没有办法检测浏览器对后台附件的支持:修复?
编辑:虽然桌面浏览器广泛支持此功能,但它在便携式设备上的支持很差,我希望能够检测到该功能.
我使用以下CSS来固定固定的身体背景.除了新的iOS7之外,它几乎适用于所有浏览器.在后者上,背景不再固定.它随页面滚动.知道如何解决这个问题吗?
body
{
background-color: #000;
background-image: url('../pics/backgrounds/blackWhite.jpg');
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Run Code Online (Sandbox Code Playgroud)
干杯