Question

如何使此背景图像与页面的其余部分一起滚动？（背景附件：滚动;不起作用。）在滚动之前，我将背景图像和徽标放置在我希望它们保留的位置，但滚动时，徽标和标题滚动但导航栏和背景图像不会。

.content {
    overflow: auto;
    position: relative;
    }
.content:before {
    content: "";
    position: fixed;
    left: 0;
    right: 0;
    top:-175px;
    z-index: -1;

    display: block;
    background-image: url("/assets/backgroundpic.jpg");
    background-size:cover;
    background-position:center top;

    width: 100%;
    height: 500px;
}



<div class="container content text-center" style="position:relative;">
  <%= image_tag("/assets/logo-seal.png", size: "250x250", class: "img-responsive img-circle margin", style: "display:inline;margin-top:200px;") %>
  <h1 style="font: 48px Oswald, sans-serif;">TITLE</h1>
</div>

Answer 1

如果您在使用jQuery时遇到问题，这是一种简单的方法 https://bavotasan.com/2011/full-sizebackground-image-jquery-plugin/

Answer 2

此背景图像分配给具有position: fixed;的元素。由于元素不会滚动（固定），因此背景也不会。

您必须在不修复该元素的情况下找到解决方案。

使CSS背景图像滚动

2 个答案: