Question

我正在努力寻找解决问题的方法。我想在我网站的标题图片中实现简单的视差。所以我决定使用skrollr.js。但是，我希望图像能够响应css background-image无法实现的功能。当我使用background-image: cover属性时，我的图片会被裁剪成小尺寸。每当我使用background-image: contain时，图像会像我想要的那样缩小，但在下面留下一个大的白色间隙空间（容器不会相应地调整大小），并且我有位置问题。我发现的另一种hacky方式是使用类似的东西：

<img src="/img/banner-bg.jpg" 
     class="img-responsive"  
     data-0="background-position:0px 0px;" 
     data-500="background-position:0px -250px;" />

就像我在skrollr.js文档中看到的一样，但遗憾的是动画无法正常工作。我想要的只是一个背景图像，但具有img-responsive类的缩放选项。

有没有办法通过javascript，jquery我可以用来相应地缩放图像？我对jquery比较新，所以我还不知道如何正确使用它。

我用于背景图片的代码：

image {
    background-image: url(/img/banner-bg.jpg);
    height: 680px;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
}

Answer 1

之后，不是说谎，10个小时的搜索我得到了它。我现在不知道它的工作原理......但是请使用： HTML

<div id="banner">Your Banner
</div>

CSS代码

 #banner {
        margin-bottom: 50px;
        overflow: hidden;
        width: 100%;
        height: 500px;
        position: relative;
        clear: both;
        background: transparent url(../images/HeaderBild.jpg) no-repeat fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: 100%;
        filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='path/to/image/1.jpg',sizingMethod='scale');
        -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='path/to/image/1.jpg',sizingMethod='scale')";

    }

    .wrap-center{
        margin: 0 auto;
        position: relative;
        max-width: 73.231em;
    }

    .banner-centered {
        text-align: center;
        position: absolute;
        display: block;
        max-width: 75.231em;
        height: inherit;
        overflow: hidden;
        margin-top: 100px;
    }

    .banner-centered h2 {
        font-size: 5.385em;
        line-height: 1.5;
        text-transform: uppercase;
        letter-spacing: 2px;
        color: #fafafa;
        font-weight: 100;
        display: block;
    }

和JS：

function scrollBanner() {
    $(document).scroll(function(){
        var scrollPos = $(this).scrollTop();
        $('#banner-text').css({
            'top' : (scrollPos/10)+'px',
            'opacity' : 1-(scrollPos/400)
        });
        $('#banner').css({
            'background-position' : 'center ' + (-scrollPos/2)+'px'
        });
    });
}
scrollBanner();

用于视差滚动的响应背景图像

1 个答案: