由于background-attachment:fixed在某些移动浏览器上不起作用(例如在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 解决方案。
.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/
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)