製作CSS背景圖片滾動

如何讓此背景圖片與頁面的其餘部分一起滾動？（背景附件：滾動;不起作用。）在滾動之前，我將背景圖片和徽標放置在我希望它們保留的位置，但滾動時，徽標和標題滾動，但導航欄和背景圖片不滾動。製作CSS背景圖片滾動

.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>

來源

2017-04-19 Xenedra

此背景圖像被分配到具有position: fixed;的元素。由於元素不會滾動（被固定），它的背景既不會。

你必須找到一個解決方案，而不固定該元素。

來源

2017-04-19 12:39:04 Johannes

謝謝！我將位置更改爲絕對位置，並將內容類放在容器外部的div中。我不知道我以前怎麼沒想到。 – Xenedra

如果你沒有在這裏使用jQuery的問題是一個簡單的方法 https://bavotasan.com/2011/full-sizebackground-image-jquery-plugin/

來源

2017-04-19 12:34:14 Pablo

製作CSS背景圖片滾動

回答

相關問題