Question

我正在使用核心动画页面。页面上的某些内容需要滚动。我想设置页面的背景颜色，我希望背景颜色覆盖滚动区域而不仅仅是当前视口。我该如何做到这一点？

更具体地说，我有：

<core-animated-pages flex transitions="cross-fade-all">
<div>Some small content</div>
<div>Some long text that will need to be scrolled</div>
<div>Another page</div>
</core-animated-pages>

那么我如何设计样式以使背景颜色覆盖滚动文本？

@jeff在div中指定相对性时提供了很大一部分答案。另外，我使用以下CSS将元素定位在上面的标题栏之外，并确保背景覆盖页面的提醒。

#instructions {
  background: #FFF59D;
  min-height: calc(100vh - 200px);
  top:+30px;
  padding:10px;
  width:calc(100% - 24px);
}

从％值和顶部减去的像素：+允许顶部的菜单栏和正文的填充 - 这些将需要根据菜单栏和填充的高度进行调整。 / p>

现在我想用纸影包装div，但是当我这样做时，我发现我失去了背景。如何对div进行纸阴影效果？

Answer 1

<content>中的<core-animated-pages>为styled position: absolute + top/right/bottom/left: 0。您没有提供其余的HTML结构以及您定义的任何其他样式，但我认为这是导致您所看到的内容的原因。

尝试设置代表要使用的页面的DOM元素position: relative（您可以通过为其指定Polymer-shorthand relative属性来执行此操作）：

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Polymer core-animated-pages Demo</title>
    <style>
      core-animated-pages > div {
        background-color: orange;
      }
    </style>
  </head>
  
  <body>
    <script src="//www.polymer-project.org/webcomponents.js"></script>
    <link rel="import" href="//www.polymer-project.org/components/core-animated-pages/core-animated-pages.html">
    
    <core-animated-pages selected="1" transitions="cross-fade-all">
      <div>Some small content</div>
      <div relative>
        <h1>Blah</h1><h1>Blah</h1><h1>Blah</h1><h1>Blah</h1><h1>Blah</h1><h1>Blah</h1><h1>Blah</h1><h1>Blah</h1><h1>Blah</h1><h1>Blah</h1><h1>Blah</h1><h1>Blah</h1><h1>Blah</h1><h1>Blah</h1><h1>Blah</h1><h1>Blah</h1><h1>Blah</h1><h1>Blah</h1>
      </div>
      <div>Another page</div>
    </core-animated-pages>
  </body>
</html>

聚合物核心 - 动画 - 页面如何使用可滚动内容设置背景

1 个答案: