目前在Firefox和Safari上,background-attachment: fixed属性可以工作,但在Chrome上无法响应。
这是一个在FF和Safari中正常工作的页面: http://prestonmcpeak.com/work/enigma.html 这是我想要的在所有三个浏览器中都起作用的效果: http://codyhouse.co/demo/alternate-fixed-scroll-background/index.html 我有一种感觉,这与页面上某个位置标记有关。
这是一个在FF和Safari中正常工作的页面: http://prestonmcpeak.com/work/enigma.html 这是我想要的在所有三个浏览器中都起作用的效果: http://codyhouse.co/demo/alternate-fixed-scroll-background/index.html 我有一种感觉,这与页面上某个位置标记有关。
<section class="project-header ">
<div class="project-background show-for-large-up"></div>
<section class="enigma"></section>
</section>
.project-header {
section {
position: fixed;
height: 100%;
width: 100%;
top: 0;
left: 0;
z-index: -1;
&.enigma {
background-size: contain;
background-attachment: fixed;
}
}
.project-background {
padding: 20% 0;
margin: 0;
}
.enigma {
background: url(../assets/img/enigma-1-m.jpg) no-repeat center top;
}
position
属性设置为static
。 - Mr.Web