如何制作框阴影背景 fixed/static？

Question

我正在为我的背景使用框阴影，我希望它在用户向下滚动页面时成为 sticky/static。目前它加载为 100% 的背景，但滚动时背景只会变成白色，越往下滚动。

/********************************************************************************/


/* HTML Body                                                                    */


/********************************************************************************/

html,
body {
  height: 100vh;
}

body {
  box-shadow: inset 0 0 100px 20px #ED1A24;
  background-attachment: fixed;
  text-align: center;
  font-family: 'Palatino Linotype'
}

<p>hi</p>
<p>hi</p>
<p>hi</p>
<p>hi</p>
<p>hi</p>
<p>hi</p>
<p>hi</p>
<p>hi</p>
<p>hi</p>
<p>hi</p>
<p>hi</p>
<p>hi</p>
<p>hi</p>
<p>hi</p>
<p>hi</p>
<p>hi</p>
<p>hi</p>
<p>hi</p>
<p>hi</p>
<p>hi</p>
<p>hi</p>
<p>hi</p>
<p>hi</p>
<p>hi</p>
<p>hi</p>
<p>hi</p>
<p>hi</p>
<p>hi</p>
<p>hi</p>
<p>hi</p>
<p>hi</p>
<p>hi</p>
<p>hi</p>
<p>hi</p>
<p>hi</p>
<p>hi</p>
<p>hi</p>
<p>hi</p>
<p>hi</p>
<p>hi</p>
<p>hi</p>
<p>hi</p>
<p>hi</p>
<p>hi</p>
<p>hi</p>
<p>hi</p>
<p>hi</p>
<p>hi</p>
<p>hi</p>
<p>hi</p>
<p>hi</p>
<p>hi</p>
<p>hi</p>
<p>hi</p>
<p>hi</p>
<p>hi</p>
<p>hi</p>
<p>hi</p>
<p>hi</p>
<p>hi</p>
<p>hi</p>
<p>hi</p>
<p>hi</p>
<p>hi</p>
<p>hi</p>
<p>hi</p>
<p>hi</p>
<p>hi</p>

Answer 1

有时最好不要为了样式设置而扰乱您的整体页面布局。这里我们可以使用一个伪元素来应用背景。

html,
body {
  margin: 0;
  padding: 0;
}

body:before {
  content: '';
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0;
  box-shadow: inset 0 0 100px 20px #ED1A24;
}

p {
  margin: 100px 10px;
}

<p>hi</p>
<p>hi</p>
<p>hi</p>
<p>hi</p>
<p>hi</p>
<p>hi</p>
<p>hi</p>
<p>hi</p>
<p>hi</p>

如何制作框阴影背景 fixed/static？

How do I make a box-shadow background fixed/static?

html

css

background