是否可以创建一个固定的透明元素，该元素不应包含文本，而应仅包含滚动中其他div的背景。背景不应在文字前面，也不应总是在文字后面。
也许在滚动条上克隆背景位置并插入标题内？我可以在相关示例中进行搜索吗？
header {
position: fixed;
top: 0;
width: 100%;
height: 100px;
}
.bg {
position: fixed;
background-image: url('https://images.pexels.com/photos/2530912/pexels-photo-2530912.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260');
background-size: cover;
top: 0;
right: 0;
left: 0;
right: 0;
height: 400px;
width: 100%;
z-index: -1;
}<header>
<h1>LOL</h1>
</header>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ut eros mi. Praesent maximus sapien in leo hendrerit scelerisque. Nulla eu hendrerit ligula. Nulla vel mauris eu lectus venenatis gravida ut ac tortor. Nunc sed elit quam. Morbi tincidunt sem sed molestie rhoncus. Donec at lorem at risus euismod finibus vitae id sapien. Integer eget sapien convallis, dictum ligula in, accumsan turpis. Suspendisse urna lorem, eleifend ut auctor sit amet, placerat nec tortor. Sed in vestibulum metus. Suspendisse nisi neque, rhoncus sed libero vitae, pretium egestas diam. Proin mollis lectus dui, sollicitudin blandit magna tincidunt in. In venenatis vel nulla eu fermentum. Mauris ut erat faucibus lorem tincidunt interdum non non nunc. Donec sit amet elit non nisl tristique tincidunt.
Duis metus nisl, vehicula eu dolor eu, porta auctor nisl. Suspendisse tristique facilisis elit at sollicitudin. Aliquam erat volutpat. Ut vestibulum ac velit ut iaculis. Fusce varius, massa a mollis consectetur, nisl ante lacinia lacus, sit amet sollicitudin ante mauris eu odio. Proin quis sem ornare, fringilla diam ut, tincidunt massa. Interdum et malesuada fames ac ante ipsum primis in faucibus. Praesent egestas neque sem, eget luctus odio condimentum eget. Mauris lacinia nec enim et accumsan. Aliquam est ante, lacinia nec vehicula vitae, molestie eget nibh. Aenean ac ante in lorem sodales aliquet non eget dolor.
Ut nulla augue, blandit pretium purus quis, rutrum rhoncus tortor. Suspendisse vel dapibus sapien, id cursus diam. Nulla facilisi. Curabitur non euismod felis, sed bibendum elit. Aliquam erat volutpat. In auctor est a metus ullamcorper placerat. Nullam mattis tellus vel malesuada feugiat. In dapibus lorem sed placerat aliquet. Donec lobortis dignissim tristique.
Donec at facilisis leo, id placerat neque. In vel sem nec mi feugiat fringilla eu ultrices urna. Duis quis tellus id lacus gravida viverra ullamcorper rutrum purus. Fusce vitae augue consectetur, condimentum turpis malesuada, tempus tortor. Fusce ac pharetra eros, nec consequat tortor. Praesent venenatis sagittis quam ac rhoncus. Donec ac sem aliquet, lobortis metus eget, tempor nulla. Maecenas auctor ac purus laoreet sagittis. Etiam sed urna a velit viverra laoreet. Integer egestas eros ut volutpat rutrum. Aenean non nunc ac purus porta maximus nec in sem. Nullam et elementum diam.
Cras vulputate, mauris sed accumsan feugiat, quam metus accumsan erat, a congue erat ante sit amet augue. In quam est, tempor id lacinia et, porta ut orci. Vestibulum id risus suscipit, bibendum nulla a, gravida lacus. Nunc congue nisl at leo lacinia fringilla. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec laoreet, lorem mollis malesuada commodo, velit lectus laoreet tellus, vel volutpat quam sem vitae sem. Sed non lectus facilisis, tristique ante sed, ultrices augue. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla varius purus ut tortor elementum, eget iaculis justo condimentum. Cras pellentesque quam ultrices aliquet aliquet. Proin non erat scelerisque, finibus tellus vel, tempus lacus. Quisque mattis, eros a facilisis iaculis, odio magna mollis ipsum, finibus vehicula lectus nulla nec nibh. Phasellus erat arcu, dignissim vel quam ut, ullamcorper tempus risus. Donec varius orci vel mauris interdum, quis sollicitudin massa ultricies.
</p>
<div class="bg"></div>
答案 0 :(得分：1)
我想您正在寻找background-attachment:fixed
header {
position: fixed;
top: 0;
width: 100%;
height: 100px;
background: url(https://i.picsum.photos/id/109/1000/1000.jpg) fixed;
background-size: cover;
}
p {
background: url(https://i.picsum.photos/id/109/1000/1000.jpg) fixed;
background-size: cover;
font-size:30px;
}
body {
margin:0;
}<header>
<h1>LOL</h1>
</header>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ut eros mi. Praesent maximus sapien in leo hendrerit scelerisque. Nulla eu hendrerit ligula. Nulla vel mauris eu lectus venenatis gravida ut ac tortor. Nunc sed elit quam. Morbi tincidunt
sem sed molestie rhoncus. Donec at lorem at risus euismod finibus vitae id sapien. Integer eget sapien convallis, dictum ligula in, accumsan turpis. Suspendisse urna lorem, eleifend ut auctor sit amet, placerat nec tortor. Sed in vestibulum metus. Suspendisse
nisi neque, rhoncus sed libero vitae, pretium egestas diam. Proin mollis lectus dui, sollicitudin blandit magna tincidunt in. In venenatis vel nulla eu fermentum. Mauris ut erat faucibus lorem tincidunt interdum non non nunc. Donec sit amet elit non
nisl tristique tincidunt. Duis metus nisl, vehicula eu dolor eu, porta auctor nisl. Suspendisse tristique facilisis elit at sollicitudin. Aliquam erat volutpat. Ut vestibulum ac velit ut iaculis. Fusce varius, massa a mollis consectetur, nisl ante lacinia
lacus, sit amet sollicitudin ante mauris eu odio. Proin quis sem ornare, fringilla diam ut, tincidunt massa. Interdum et malesuada fames ac ante ipsum primis in faucibus. Praesent egestas neque sem, eget luctus odio condimentum eget. Mauris lacinia
nec enim et accumsan. Aliquam est ante, lacinia nec vehicula vitae, molestie eget nibh. Aenean ac ante in lorem sodales aliquet non eget dolor. Ut nulla augue, blandit pretium purus quis, rutrum rhoncus tortor. Suspendisse vel dapibus sapien, id cursus
diam. Nulla facilisi. Curabitur non euismod felis, sed bibendum elit. Aliquam erat volutpat. In auctor est a metus ullamcorper placerat. Nullam mattis tellus vel malesuada feugiat. In dapibus lorem sed placerat aliquet. Donec lobortis dignissim tristique.
Donec at facilisis leo, id placerat neque. In vel sem nec mi feugiat fringilla eu ultrices urna. Duis quis tellus id lacus gravida viverra ullamcorper rutrum purus. Fusce vitae augue consectetur, condimentum turpis malesuada, tempus tortor. Fusce ac
pharetra eros, nec consequat tortor. Praesent venenatis sagittis quam ac rhoncus. Donec ac sem aliquet, lobortis metus eget, tempor nulla. Maecenas auctor ac purus laoreet sagittis. Etiam sed urna a velit viverra laoreet. Integer egestas eros ut volutpat
rutrum. Aenean non nunc ac purus porta maximus nec in sem. Nullam et elementum diam. Cras vulputate, mauris sed accumsan feugiat, quam metus accumsan erat, a congue erat ante sit amet augue. In quam est, tempor id lacinia et, porta ut orci. Vestibulum
id risus suscipit, bibendum nulla a, gravida lacus. Nunc congue nisl at leo lacinia fringilla. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec laoreet, lorem mollis malesuada commodo, velit lectus
laoreet tellus, vel volutpat quam sem vitae sem. Sed non lectus facilisis, tristique ante sed, ultrices augue. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla varius purus ut tortor elementum, eget iaculis justo condimentum. Cras
pellentesque quam ultrices aliquet aliquet. Proin non erat scelerisque, finibus tellus vel, tempus lacus. Quisque mattis, eros a facilisis iaculis, odio magna mollis ipsum, finibus vehicula lectus nulla nec nibh. Phasellus erat arcu, dignissim vel quam
ut, ullamcorper tempus risus. Donec varius orci vel mauris interdum, quis sollicitudin massa ultricies.
</p>
答案 1 :(得分：0)
暗中暗杀她，直到你使问题更清楚为止，但这就是你想要的吗？这是jsfiddle：https://jsfiddle.net/p3z8tq4r/1/
header {
position: fixed;
top: 0;
width: 100%;
height: 100px;
}
.bg {
position: fixed;
background-image: url('https://images.pexels.com/photos/2530912/pexels-photo-2530912.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260');
background-size: cover;
top: 0;
right: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
z-index: -1;
}
p{
background: rgba(25, 25, 25, .5);
}<header>
<h1>LOL</h1>
</header>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ut eros mi. Praesent maximus sapien in leo hendrerit scelerisque. Nulla eu hendrerit ligula. Nulla vel mauris eu lectus venenatis gravida ut ac tortor. Nunc sed elit quam. Morbi tincidunt sem sed molestie rhoncus. Donec at lorem at risus euismod finibus vitae id sapien. Integer eget sapien convallis, dictum ligula in, accumsan turpis. Suspendisse urna lorem, eleifend ut auctor sit amet, placerat nec tortor. Sed in vestibulum metus. Suspendisse nisi neque, rhoncus sed libero vitae, pretium egestas diam. Proin mollis lectus dui, sollicitudin blandit magna tincidunt in. In venenatis vel nulla eu fermentum. Mauris ut erat faucibus lorem tincidunt interdum non non nunc. Donec sit amet elit non nisl tristique tincidunt.
Duis metus nisl, vehicula eu dolor eu, porta auctor nisl. Suspendisse tristique facilisis elit at sollicitudin. Aliquam erat volutpat. Ut vestibulum ac velit ut iaculis. Fusce varius, massa a mollis consectetur, nisl ante lacinia lacus, sit amet sollicitudin ante mauris eu odio. Proin quis sem ornare, fringilla diam ut, tincidunt massa. Interdum et malesuada fames ac ante ipsum primis in faucibus. Praesent egestas neque sem, eget luctus odio condimentum eget. Mauris lacinia nec enim et accumsan. Aliquam est ante, lacinia nec vehicula vitae, molestie eget nibh. Aenean ac ante in lorem sodales aliquet non eget dolor.
Ut nulla augue, blandit pretium purus quis, rutrum rhoncus tortor. Suspendisse vel dapibus sapien, id cursus diam. Nulla facilisi. Curabitur non euismod felis, sed bibendum elit. Aliquam erat volutpat. In auctor est a metus ullamcorper placerat. Nullam mattis tellus vel malesuada feugiat. In dapibus lorem sed placerat aliquet. Donec lobortis dignissim tristique.
Donec at facilisis leo, id placerat neque. In vel sem nec mi feugiat fringilla eu ultrices urna. Duis quis tellus id lacus gravida viverra ullamcorper rutrum purus. Fusce vitae augue consectetur, condimentum turpis malesuada, tempus tortor. Fusce ac pharetra eros, nec consequat tortor. Praesent venenatis sagittis quam ac rhoncus. Donec ac sem aliquet, lobortis metus eget, tempor nulla. Maecenas auctor ac purus laoreet sagittis. Etiam sed urna a velit viverra laoreet. Integer egestas eros ut volutpat rutrum. Aenean non nunc ac purus porta maximus nec in sem. Nullam et elementum diam.
Cras vulputate, mauris sed accumsan feugiat, quam metus accumsan erat, a congue erat ante sit amet augue. In quam est, tempor id lacinia et, porta ut orci. Vestibulum id risus suscipit, bibendum nulla a, gravida lacus. Nunc congue nisl at leo lacinia fringilla. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec laoreet, lorem mollis malesuada commodo, velit lectus laoreet tellus, vel volutpat quam sem vitae sem. Sed non lectus facilisis, tristique ante sed, ultrices augue. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla varius purus ut tortor elementum, eget iaculis justo condimentum. Cras pellentesque quam ultrices aliquet aliquet. Proin non erat scelerisque, finibus tellus vel, tempus lacus. Quisque mattis, eros a facilisis iaculis, odio magna mollis ipsum, finibus vehicula lectus nulla nec nibh. Phasellus erat arcu, dignissim vel quam ut, ullamcorper tempus risus. Donec varius orci vel mauris interdum, quis sollicitudin massa ultricies.
</p>
<div class="bg"></div>