问题：
如何使用css创建粘性背景？
陈修诚
我正在尝试使用CSS创建一个粘性背景，类似这样的东西（粉红色背景将被完全填充，但例如，我保持了最小可见高度）
html,
body {
margin: 0;
height: 100%;
width: 100%;
max-height: 100%;
max-width: 100%;
}
#header {
height: 100px;
background: black;
width: 100%;
}
#rest {
min-height: 100%;
width: 100%;
background: blue;
}
#content {
width: 50%;
background: yellow;
height: 100%;
margin: auto;
position: relative;
z-index: 1;
}
#sticky_back
{
position:sticky;
top:0;
height:50px;
width:100%;
background-color: pink;
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="header"></div>
<div id="rest">
<div id="sticky_back"></div>
<div id="content">
<span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
</div>
</div>
</body>
</html>但是我似乎不能重叠2个粉红色和黄色的div，如果我试图改变位置：绝对和相对，那么内容中的文本就会像这样溢出
html,
body {
margin: 0;
height: 100%;
width: 100%;
max-height: 100%;
max-width: 100%;
}
#header {
height: 100px;
background: black;
width: 100%;
}
#rest {
min-height: 100%;
width: 100%;
background: blue;
position: relative;
}
#content {
min-height:100%;
width: 50%;
background: yellow;
position: absolute;
left: 50%;
transform: translate(-50%,0%);
top:0;
z-index: 1;
}
#sticky_back
{
position:sticky;
top:0;
height:50px;
width:100%;
background-color: pink;
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="header"></div>
<div id="rest">
<div id="sticky_back"></div>
<div id="content">
<span>
psum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor st dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu f
</div>
</body>
</html>有什么方法可以在避免溢出的同时创建所需的背景吗？
编辑
如果您正在寻找完全的背景填充解决方案，请检查此链接：
如何适应粘性背景图像并防止css溢出？
共有1个答案
曾元忠
由于“sticky\u back”的高度未知，因此可以使用网格布局。
将display:grid添加到父级（#rest），并将网格区域：1/1/2/2添加到两个子级（#content和#stick_back）。
您还需要将z-index： 0添加到#content以将元素放在前面。
#rest {
display: grid;
grid-template-columns: auto 1fr;
grid-template-rows: auto 1fr;
.
.
.
#content {
z-index: 0;
grid-area: 1 / 1 / 2 / 2;
margin: 0 auto;
.
.
.
#sticky_back {
grid-area: 1 / 1 / 2 / 2;
.
.
.
类似资料：
-
本文向大家介绍如何使用CSS创建全屏视频背景？，包括了如何使用CSS创建全屏视频背景？的使用技巧和注意事项，需要的朋友参考一下 要使用CSS创建全屏视频背景，代码如下- 示例 输出结果 上面的代码将产生以下输出-
-
问题内容： 我有一个带有文本的元素。每当我降低不透明度时，我就会降低整个身体的不透明度。有什么办法可以让我变得更黑，而不是其他所有？ 问题答案： 只需将此代码添加到您的图像CSS 更新：并非所有浏览器都支持RGBa，因此您应该具有“后备颜色”。该颜色很可能是纯色（完全不透明），例如：。
-
本文向大家介绍如何使用CSS创建产品卡？，包括了如何使用CSS创建产品卡？的使用技巧和注意事项，需要的朋友参考一下 要使用CSS创建产品卡，代码如下- 示例 上面的代码将产生以下输出-
-
问题内容： 我想以一种优雅的方式在用户滚动时在窗口顶部“收集”多级标题，并让我获得90％的访问权限。以下代码段的工作方式与我想要的一样，但有一个例外：标题2b到达顶部时，标题3b仍然可见。由于标头3b是标头2a的“子级”，因此我希望标头2b到达顶部后，滚动标头即可滚动或以某种方式隐藏。（可以预料，标题1b和标题2d都有相同的问题。） 我知道我在这里拥有CSS 应该 是如何工作的，但是有没有一种优雅
-
如何创建多色边框，如下图所示？
-
问题内容： 我正在使用CSS attrubutes： 不透明度：.9; 使DIV透明，但是当我在该DIV中添加另一个DIV时，它也使其透明。 我想使外部（背景）DIV仅透明。怎么样 ？ 问题答案： 内部DIV无法撤消外部DIV的不透明度属性。如果要实现透明度，请使用或： 外层div： 内部div： 编辑 因为您已经添加了问题，所以我假设您还想要IE（旧版本）的有效解决方案。这应该可以工作（IE的最