Bootstrap视差
Bootstrap parallax
我正在尝试为 bootstrap 超大屏幕背景图像添加视差效果。除了在较小的屏幕尺寸上出现的这种令人讨厌的效果外,我让它工作了。每当图像的宽度超过屏幕的宽度时,图像会在滚动过程中缩小,从而破坏视差效果。
删除设置为覆盖的背景大小可修复不需要的缩放,但会在较大的屏幕上添加空白。
CSS
.jumbotron-bg {
background: url("http://res.cloudinary.com/mrcloud/image/upload/q_100/v1472550908/slide-01_vksled.jpg") no-repeat center center, rgba(112, 152, 255, 0.5);
position: fixed;
width: 100%;
height: 550px; /*same height as jumbotron */
top: 0;
left: 0;
z-index: -999;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-blend-mode: soft-light;
-webkit-background-blend-mode: soft-lightsoft-light;
}
JS
var jumboHeight = $('.jumbotron').outerHeight();
function parallax(){
var scrolled = $(window).scrollTop();
$('.jumbotron-bg').css('height', (jumboHeight-scrolled) + 'px');
}
$(window).scroll(function(e){
parallax();
});
Codepen 示例:http://codepen.io/MarcRuemekorf/pen/KgProm
不胜感激。
如果删除 background-size:cover 在较小的屏幕上解决了您的问题,但在较大的屏幕上给了您想要的结果,请使用媒体查询仅在 medium/larger 屏幕上应用背景大小。
.jumbotron-bg {
background: url("http://res.cloudinary.com/mrcloud/image/upload/q_100/v1472550908/slide-01_vksled.jpg") no-repeat center center, rgba(112, 152, 255, 0.5);
position: fixed;
width: 100%;
height: 550px;
/*same height as jumbotron */
top: 0;
left: 0;
z-index: -999;
background-blend-mode: soft-light;
-webkit-background-blend-mode: soft-lightsoft-light;
}
/* Medium */
@media(min-width:992px) and (max-width:1199px) {
.jumbotron-bg {
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
}
/* Large */
@media(min-width:1200px) {
.jumbotron-bg {
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
}
我正在尝试为 bootstrap 超大屏幕背景图像添加视差效果。除了在较小的屏幕尺寸上出现的这种令人讨厌的效果外,我让它工作了。每当图像的宽度超过屏幕的宽度时,图像会在滚动过程中缩小,从而破坏视差效果。
删除设置为覆盖的背景大小可修复不需要的缩放,但会在较大的屏幕上添加空白。
CSS
.jumbotron-bg {
background: url("http://res.cloudinary.com/mrcloud/image/upload/q_100/v1472550908/slide-01_vksled.jpg") no-repeat center center, rgba(112, 152, 255, 0.5);
position: fixed;
width: 100%;
height: 550px; /*same height as jumbotron */
top: 0;
left: 0;
z-index: -999;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-blend-mode: soft-light;
-webkit-background-blend-mode: soft-lightsoft-light;
}
JS
var jumboHeight = $('.jumbotron').outerHeight();
function parallax(){
var scrolled = $(window).scrollTop();
$('.jumbotron-bg').css('height', (jumboHeight-scrolled) + 'px');
}
$(window).scroll(function(e){
parallax();
});
Codepen 示例:http://codepen.io/MarcRuemekorf/pen/KgProm
不胜感激。
如果删除 background-size:cover 在较小的屏幕上解决了您的问题,但在较大的屏幕上给了您想要的结果,请使用媒体查询仅在 medium/larger 屏幕上应用背景大小。
.jumbotron-bg {
background: url("http://res.cloudinary.com/mrcloud/image/upload/q_100/v1472550908/slide-01_vksled.jpg") no-repeat center center, rgba(112, 152, 255, 0.5);
position: fixed;
width: 100%;
height: 550px;
/*same height as jumbotron */
top: 0;
left: 0;
z-index: -999;
background-blend-mode: soft-light;
-webkit-background-blend-mode: soft-lightsoft-light;
}
/* Medium */
@media(min-width:992px) and (max-width:1199px) {
.jumbotron-bg {
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
}
/* Large */
@media(min-width:1200px) {
.jumbotron-bg {
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
}