固定的透明元素不应包含文本，而仅应包括背景

Question

是否可以创建一个固定的透明元素，该元素不应包含文本，而应仅包含滚动中其他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>

Answer 1

另一答案