我试图让我的fixed元素的background移动(改变background-position)
向下滚动页面时。
我制作了一个小动画来演示我想要的效果。
代码:
#nav-container {
position: fixed;
top: 0;
left: 0;
box-shadow: 5px 2px 3px gray;
background: url('triangular.png');
background-attachment: fixed;
height: 200%;
width: 142px;
z-index: 8;
/*animation: movebg 1s infinite linear;
-webkit-animation: movebg 1s infinite linear;*/
}
@keyframes movebg {
0% {background-position: 0 0;}
100% {background-position: 60px 60px;}
}
@-webkit-keyframes movebg {
0% {background-position: 0 0;}
100% {background-position: 60px 60px;}
}
<body class="pure-u-1">
<div id="bg-container">
</div>
<div id="nav-container">
<span id="logo-nav">
</span>
<nav id="nav">
<li>
<a href="#etusivu">Etusivu</a>
</li>
<li>
<a href="#tietoa">Tietoa Meistä</a>
</li>
<li>
<a href="#hinnasto">Hinnasto</a>
</li>
<li>
<a>Yhteystiedot</a>
</li>
</nav>
</div>
<div id="wrapper" class="pure-u-1">
<div id="sivu-1" class="pure-u-1">
<div id="logo">
</div>
<img src="kuntosali.jpg" class="pure-img"></img>
<!--
<video autoplay id="bgvid" src="kuntosali.mp4" type="video/mp4">
</video>
-->
</div>
<div id="sivu-2">
<span>
- "Keski-Uudenmaan uusin ja nykyaikaisin kuntosali" -
</span>
</div>
如有可能，欢迎提供 CSS3 解决方案。
如果没有，jQuery 是次要选项。
最佳答案
也许这就是您所需要的:我已经放置了一个绝对定位的背景，它可以提高整个页面的高度，然后将固定的元素放在上面。
body {
position: relative;
height: 100%;
padding: 0;
margin: 0;
}
* {
margin: 0;
}
#bg-container {
position: absolute;
height: 100%;
padding: 0;
margin: 0;
top: 0;
left: 0;
box-shadow: 5px 2px 3px gray;
background: url('http://i.imgur.com/gsXrvJ8.png');
width: 142px;
z-index: 2;
}
#nav-container {
position: fixed;
top: 0;
left: 0;
width: 142px;
height: 200%;
z-index: 8;
}
希望对您有所帮助!
关于jquery - 在固定元素中滚动背景？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25666718/