Question

::before选择器未在固定元素中垂直延伸。

是否有办法使背景填充整个高度？现在，当用户滚动时，::before元素将在用户滚动到视口之外时立即停止。

最好是非JavaScript 方式。

谢谢。

NB：我正在使用SASS，请随时在SCSS或纯CSS中提供答案。

摘要：

.outer
  position: fixed
  &::before
    content: ''
    position: absolute
    left: 0
    top: 0
    bottom: 0
    right: 0
    background-image: linear-gradient(rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.3))

Answer 1

您可以在：伪元素之前使用固定位置。

.outer{
  position: fixed;
  background: url('https://images.unsplash.com/photo-1473830394358-91588751b241?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60');
  width: 100%;
  height: 100%;
  overflow-y: auto;
  padding: 30px;
}
.outer:before{
    content: '';
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    background-image: linear-gradient(rgba(255, 255, 255, 0.5) , rgba(255, 255, 255, 0.4));
} 
    
.outer p{
    color: #fff;
    font-family: sans-serif;
    max-width: 400px;
    font-size: 2rem;
}

<div class="outer">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eu dignissim felis, sit amet ultricies justo. Praesent consequat at nulla nec eleifend. Sed convallis, metus non pellentesque elementum, nunc arcu condimentum leo, sit amet pellentesque turpis augue ac sapien. Phasellus facilisis lacinia mauris at consectetur. Morbi sapien augue, condimentum vel erat vitae, semper rutrum erat. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum porttitor pharetra faucibus. Donec lobortis massa id dui porta aliquam. Integer eu velit lacinia, cursus libero in, vulputate ligula. Ut ut vestibulum nunc. Nulla facilisi. In turpis augue, luctus pellentesque nibh vel, ullamcorper feugiat orci. Mauris ut metus nec mauris venenatis viverra ut eu mi. Integer quis sem sed tortor dignissim lobortis et at dui. Proin pretium id lectus non semper.dfsdf</p>
</div>

有没有办法在固定元素中垂直扩展:: before？

1 个答案: