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>

在网站中无限重复背景的视差滚动

1 个答案: