Question

Here's the page.以下空间＆＃34; Pedidos＆＃34;，滚动，具有渐变背景。我的问题是我希望背景在滚动时继续滚动和重复，但它只是保持固定。我在一个简单的页面上进行过实验，它确实滚动了，为什么它不会在这里发生？这是该部分的相关样式：

.pedidos #list {
  width: 100%;
  font-size: 1.3em;
  margin: 0;
  padding: 0;
  overflow-y: overlay;
  max-height: calc(100vh - 405px - 10px);
  background-image: repeating-linear-gradient(180deg, #e1e1e1, #e1e1e1 35px, #cdcdcd 35px, #cdcdcd 70px);
  background-repeat: repeat;
}

修改

这里是该区域的当前代码（列表项目就是创建空间以进行演示）：

<ul id="list">
  <li style="height: 1000px; background-color: transparent;">a</li>
</ul>

Answer 1

这应该可以解决问题。 Background-attachment:fixed修复了视口的背景附件。

编辑：为了使背景与页面的其余部分一起滚动，请使用background-attachment:scroll

.pedidos #list {
  width: 100%;
  font-size: 1.3em;
  margin: 0;
  padding: 0;
  overflow-y: overlay;
  max-height: calc(100vh - 405px - 10px);
  background-image: repeating-linear-gradient(180deg, #e1e1e1, #e1e1e1 35px, #cdcdcd 35px, #cdcdcd 70px);
  background-repeat: repeat;
  background-attachment:scroll;
}

使用CSS渐变背景滚动

1 个答案: