在網站中無限重複背景的視差滾動

Question

我有一個小方塊圖形，重複時會呈現視覺上令人愉悅的壁紙。將其設置爲重複background-image很簡單。

但有沒有辦法，這無限重複background-image保持靜態，而滾動我的網站只導致前景滾動？

寧願純粹的CSS解決方案，或最小的JS（如果絕對需要）。

Answer 1

設置background-attachment: fixed會將背景圖像位置設置爲固定。這對你有用嗎？

body { 
 
    background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/e/e9/Crystal_Clear_action_bookmark_Silver.svg/128px-Crystal_Clear_action_bookmark_Silver.svg.png'); 
 
    background-attachment: fixed; 
 
} 
 

 
p { 
 
    margin-bottom: 300px; 
 
}

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed interdum congue erat vitae commodo. Proin a est vitae risus feugiat malesuada eu scelerisque turpis. Nullam purus ante, vulputate ac tristique in, maximus in lectus. Cras interdum sed sapien 
 
    in scelerisque. Proin finibus non ligula non venenatis. Nullam blandit, urna mattis sodales mollis, magna libero interdum neque, vitae semper lacus mauris quis mi. Etiam finibus ultricies blandit. Donec justo risus, venenatis sed aliquam in, ullamcorper 
 
    nec velit. Proin vitae arcu enim.</p> 
 

 
<p>Pellentesque porta orci sit amet urna pharetra tristique. Duis iaculis quam eget auctor dictum. Proin sit amet purus id orci sollicitudin aliquam sit amet sit amet lorem. Donec egestas, arcu id volutpat suscipit, felis ex rhoncus nibh, in lacinia sem 
 
    magna lobortis tortor. Sed at nibh dolor. Donec sed tellus sit amet libero volutpat tempor. Maecenas sodales nibh dui, sit amet mollis tellus blandit varius. Nunc eu mollis nisl. Aliquam non nisl felis. Donec vehicula, ipsum id laoreet mollis, dui mi 
 
    dapibus urna, ut sodales lacus metus malesuada elit. Sed fermentum euismod condimentum. Ut vel pretium lorem, id convallis arcu. Fusce dictum felis vitae quam lobortis, ac venenatis lectus elementum. Phasellus est erat, venenatis sed ligula nec, viverra 
 
    pellentesque nisl. Nullam quam enim, ullamcorper nec malesuada vel, elementum id mi. Aliquam quam arcu, lobortis sed mi vel, pharetra euismod tellus.</p> 
 

 
<p>Donec eu justo feugiat, imperdiet mauris in, dictum nulla. Donec metus diam, pharetra a accumsan at, ultricies ac nibh. Mauris egestas aliquam enim, eget dapibus nisi eleifend sed. Suspendisse velit sem, fringilla vitae nulla ac, tincidunt blandit tellus. 
 
    Donec vitae ex quam. Nullam vehicula lacus lobortis libero egestas, sed mollis quam pretium. Vivamus turpis lorem, tempus at felis et, porta sagittis nulla. Nullam non purus vel tellus blandit vehicula non non felis. Nullam ut lobortis nisl.</p>