CSS多背景以不同的速度
问题描述:
滚动我碰到这个网站走到今天,我被迷惑了:http://www.actionbutton.net/CSS多背景以不同的速度
他是使用某种已知的技术,他的背景是滚动以不同的速率和相互重叠。我看了看源头,但很困惑。有谁知道这项技术被称为什么以及如何学习它?
答
你也可以考虑这样的事情(不需要的JavaScript):
@keyframes backgroundscroller {
from {
background-position: 0% 0%;
}
to {
background-position: 500% 500%, 400% 400%, 300% 300%, 200% 200%, 100% 100%;
}
}
#yourdivid {
background-image: url('full/sprite1.png'), url('512/sprite2.png'), url('256/sprite3.png'), url('128/sprite4.png'), url('64/sprite5.png');
animation-name: backgroundscroller;
animation-duration: 300s;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-direction: normal;
}
显然,你必须意识到,这将支持CSS3浏览器只工作,你还需要考虑,包括一个非常有用的JavaScript,负责在需要的地方添加前缀:http://leaverou.github.com/prefixfree/
+2
我很好奇你的方法,但对其他人来说是不够的。我创建了一个包含文本的div,但它没有做任何事情......你能写一些更完整的东西吗? – ekkis 2014-08-22 21:39:27
答
下面是不使用JS(因此背景以恒定速度滚动)的视差效果的近似值。所述jfiddle例如:http://jsfiddle.net/MFC9B/2/
重点是,有2层嵌套的div,外一个以保持背景,内一个以保持内容:
.section {
position:relative;
z-index:1;
height:500px;
width:100%;
background-attachment:fixed; /* this keeps the background in place */
background-size:100% 100%;
background-repeat:no-repeat;
}
.content {
position:relative;
z-index:2;
background-color:#fff;
border:2px solid #666;
height:50%; /* this height difference allows the bg to show through */
}
??你有网站,所以只查看源代码并找出它? – Steve 2012-03-17 18:13:56