不完全固定的视差背景图像
Parallax background image that isn't exactly fixed
我正在尝试在 div 内的背景图像上创建细微的视差效果。我使用了以下标记和 CSS..
HTML
<div class="widget bg-parallax" style="background-image: url(~~set dynamically~~)"></div>
CSS
.widget {
height:500px;
position: relative;
}
.bg-parallax {
background-size: cover;
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center center;
}
但这会创建一个在页面滚动时完全静止的背景图像。
我想让背景滚动,但速度比页面慢得多。
纯 CSS 可以实现吗?如果没有,任何人都可以用 JS/jQuery 为我指明正确的方向。
看看 w3schools.com 中的这段代码,你的略有不同 http://www.w3schools.com/howto/howto_css_parallax.asp
有几种方法可以做到这一点。是的,纯 CSS.
是可以实现的
.forefront-element {
-webkit-transform: translateZ(999px) scale(.7);
transform: translateZ(999px) scale(.7);
z-index: 1;
}
.base-element {
-webkit-transform: translateZ(0);
transform: translateZ(0);
z-index: 4;
}
.background-element {
-webkit-transform: translateZ(-999px) scale(2);
transform: translateZ(-999px) scale(2);
z-index: 3;
}
这个控制高度。负 Z 值使其在滚动时变慢。
我正在尝试在 div 内的背景图像上创建细微的视差效果。我使用了以下标记和 CSS..
HTML
<div class="widget bg-parallax" style="background-image: url(~~set dynamically~~)"></div>
CSS
.widget {
height:500px;
position: relative;
}
.bg-parallax {
background-size: cover;
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center center;
}
但这会创建一个在页面滚动时完全静止的背景图像。
我想让背景滚动,但速度比页面慢得多。
纯 CSS 可以实现吗?如果没有,任何人都可以用 JS/jQuery 为我指明正确的方向。
看看 w3schools.com 中的这段代码,你的略有不同 http://www.w3schools.com/howto/howto_css_parallax.asp
有几种方法可以做到这一点。是的,纯 CSS.
是可以实现的.forefront-element {
-webkit-transform: translateZ(999px) scale(.7);
transform: translateZ(999px) scale(.7);
z-index: 1;
}
.base-element {
-webkit-transform: translateZ(0);
transform: translateZ(0);
z-index: 4;
}
.background-element {
-webkit-transform: translateZ(-999px) scale(2);
transform: translateZ(-999px) scale(2);
z-index: 3;
}
这个控制高度。负 Z 值使其在滚动时变慢。