替代背景附件：固定

由于背景附件：固定在一些移动浏览器不能正常工作（例如，在iOS上），有什么替代品的出现，特别是努力实现以下演示时：http://cppforums.ludost.net/test/test.html 替代背景附件：固定

CSS ：

.sec1 { 
    min-height: 1000px; 
    background: #222 url('wallpaper-2959361.jpg') no-repeat center top fixed; 
} 

.sec2 { 
    min-height: 1000px; 
    background: #222 url('wallpaper-1829278.jpg') no-repeat center top fixed; 
}

HTML：

<div class="sec1">text</div> 
<h1>Title 1</h1> 
<div class="sec2">more text</div> 
<h1>Title 2</h1> 
<div class="sec1">even more text</div>

就如何落实在所有浏览器上运行的方式演示有什么建议？优选地，仅CSS解决方案。

来源

2014-01-20 Alpha_Hydrae

三个事情要考虑。 1.移动设备上的文件大小和加载时间。 2.无论它有没有它从你的网站的一般构造。 3.移动网站不必像正常的网站一样遵循相同的结构。移动应该意味着该网站在电话上正常工作。 – Cam

.bg 
    { 
     background-image: url(bg.jpg); 
     background-position: center; 
     background-repeat: no-repeat; 
     background-size: cover; 
     position: fixed; 
     top: 0px; 
     bottom: 0px; 
     left: 0px; 
     right: 0px; 
     z-index: -1; 
     -webkit-transform: translateZ(0); 
     pointer-events: none; 
    }

见这个例子：https://rawgit.com/arnaudbreton/background-fixed-chrome-rendering-issue/master/index-without-rendering-issue.html

来自 http://blog.mention.com/building-a-beautiful-homepage-how-we-nailed-down-chrome-performance-rendering-issues/

来源

2015-04-28 10:10:56

jQuery的替代background-attachment:fixed;（一定要拥有jQuery的正确安装）：

$(window).scroll(function() { 
    var scrolledY = $(window).scrollTop(); 
    $('.sec1').css('background-position', 'center ' + ((scrolledY)) + 'px'); 
});

重要的是要注意，您的背景图片不能大于股利或事物的高度得到揭去高是很重要的。

来源

2014-08-08 20:46:36

替代背景附件：固定

回答

相关问题