当前位置: 首页 > 知识库问答 >
问题:

如何让背景图像保持不变时,从滚动切换到固定?

翁宏茂
2023-03-14

我试图使用不同的图片作为网站文章页面的背景。文章的每个部分都有不同的背景图像。背景应正常滚动(背景附件为“滚动”,大小为“包含”),直到相应部分达到顶部,然后用封面大小固定。

我的问题是,背景图像只有在固定时看起来很好。大多数图像是在背景中的帧。然而,在“滚动和包含模式”中,图像不会覆盖整个背景,而是其正常高度。我收集这是因为我使用"包含"作为背景大小,然而,改变大小为"覆盖"或百分比仍然不使图像看起来一样时,在滚动时,因为它是固定的

从“背景附件:滚动”切换到“背景附件:固定”时,是否可能使背景图像显示为相同大小?

这里有一个JSFiddle演示了这个问题:单击按钮演示了图像在固定封面和滚动包含时的外观。我试图让图像看起来像它目前作为固定封面时的样子,但没有被固定。

<section class="fullPage" style="background-image: url('https://img00.deviantart.net/d899/i/2013/030/e/b/jumping_clouds_by_tsharna-d5t830c.jpg')">


    <article class="content article" >
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. </p>

<p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. </p>

<p>Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. </p>

<p>Proin quam. Etiam ultrices. Suspendisse in justo eu magna luctus suscipit. Sed lectus. Integer euismod lacus luctus magna. Quisque cursus, metus vitae pharetra auctor, sem massa mattis sem, at interdum magna augue eget diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi lacinia molestie dui. Praesent blandit dolor. Sed non quam. In vel mi sit amet augue congue elementum. Morbi in ipsum sit amet pede facilisis laoreet. Donec lacus nunc, viverra nec, blandit vel, egestas et, augue. Vestibulum tincidunt malesuada tellus. Ut ultrices ultrices enim. </p>

<p>Curabitur sit amet mauris. Morbi in dui quis est pulvinar ullamcorper. Nulla facilisi. Integer lacinia sollicitudin massa. Cras metus. Sed aliquet risus a tortor. Integer id quam. Morbi mi. Quisque nisl felis, venenatis tristique, dignissim in, ultrices sit amet, augue. Proin sodales libero eget ante. Nulla quam. Aenean laoreet. Vestibulum nisi lectus, commodo ac, facilisis ac, ultricies eu, pede. Ut orci risus, accumsan porttitor, cursus quis, aliquet eget, justo. </p>



    </article>
</section>


<section class="fullPage"  style="background-image: url('https://s3.amazonaws.com/s3.imagefinder.co/uploads/2017/10/07163335/man-jumping-into-the-clouds-880x880.jpg')">


    <article class="content article">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. </p>

<p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. </p>

<p>Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. </p>

<p>Proin quam. Etiam ultrices. Suspendisse in justo eu magna luctus suscipit. Sed lectus. Integer euismod lacus luctus magna. Quisque cursus, metus vitae pharetra auctor, sem massa mattis sem, at interdum magna augue eget diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi lacinia molestie dui. Praesent blandit dolor. Sed non quam. In vel mi sit amet augue congue elementum. Morbi in ipsum sit amet pede facilisis laoreet. Donec lacus nunc, viverra nec, blandit vel, egestas et, augue. Vestibulum tincidunt malesuada tellus. Ut ultrices ultrices enim. </p>

<p>Curabitur sit amet mauris. Morbi in dui quis est pulvinar ullamcorper. Nulla facilisi. Integer lacinia sollicitudin massa. Cras metus. Sed aliquet risus a tortor. Integer id quam. Morbi mi. Quisque nisl felis, venenatis tristique, dignissim in, ultrices sit amet, augue. Proin sodales libero eget ante. Nulla quam. Aenean laoreet. Vestibulum nisi lectus, commodo ac, facilisis ac, ultricies eu, pede. Ut orci risus, accumsan porttitor, cursus quis, aliquet eget, justo. </p>



    </article>
</section>




.fullPage{
    width:100%;
    min-height:100%;
    background-attachment:scroll;
    -webkit-background-size: contain;
    -moz-background-size: contain;
    -o-background-size: contain;
    background-size: contain;
    background-repeat: no-repeat;
    padding-bottom:100px;

}

.content{
    margin-left:10%;
    margin-right:10%;
}

.article{
    background-color:white;
    padding:3%;
}

共有1个答案

松钊
2023-03-14

检查是否解决了以下问题:

$('.fullPage').each(function(i){
      $(this).css({
        "background-attachment":"scroll",
        "background-size":"cover",
        "-webkit-background-size":"cover",
        "-moz-background-size":"cover",
        "-o-background-size":"cover"
      });
})

JSFiddle示例

 类似资料:
  • 问题内容: 如何在页面滚动期间保持背景图像固定?我有此CSS代码,并且图像是身体的背景,而不是 问题答案: background-attachment: fixed;

  • 如何在css中设置固定背景并滚动???而且我一直试图设置一个背景来覆盖所有维度,因为我总是以模糊的背景结束:( 我在这方面相对较新,所以请不要评判我,这是我的css:body#bg{宽度:100%;高度:100%;位置:绝对;左:0px;顶部:0px;z-index:0;背景附件:固定; }

  • 问题内容: 我想知道,当我向下或向上滚动时,我的图像和布局的颜色会乱七八糟,我使用recyclerview创建了cardview。并设置图片(在点击时更改颜色,以了解其用户喜欢的项目),并将setbackgroundcolor(随机选择)设置为父版面,以使Cardview更具吸引力。但是当我滚动1.图像更改位置的图像时,2.布局背景自动更改颜色。 我在这里发布适配器的代码。 } 问题答案: 我已经

  • 编辑:我应该提到的是,我知道纵横比公式:原始高度/原始宽度x新宽度=新高度,但是,我不知道如何正确地使用它,以我的优势。

  • 问题内容: 我尝试查看其他答案,但没有帮助。我的背景是动态的,因此图像的大小会改变,因此我需要保持宽高比,以便可以看到整个图像。这是我的CSS: } html 此刻取决于图像,有时很多图像被切除。我希望缩小图像以便可以完全看到。任何的想法? 问题答案: 使用覆盖整个元件,同时保持纵横比 如果要显示整个图像,同时保持宽高比,请改用:

  • 我有一个没有滚动条的静态页面。它链接到另一个有滚动条的页面。两个页面共享相同的背景图像。当我来回切换时,我可以注意到背景图像和页面内容稍微向左移动,因为滚动条显示在一个页面上,而不是另一个页面上。 我用这个技巧解决了这个问题,但它只对主体内容有效。背景图像仍在移动。有没有办法解决这个问题?我有一个补丁(overflow-y:scroll;),它总是显示滚动条,即使没有滚动条,但这并不理想。 我的B