Question

在我的网站的移动版本中，＃l-splash背景图像占据了整个视点。我在背景图片上方有一个透明的覆盖层。由于某些原因，向下滚动时覆盖层不会覆盖整个图像。

在Chrome开发工具中，叠加层显示得很好，但是当我在实际的移动设备上打开该网站时，该页面无法正常工作。您可以在手机上尝试一下：https://nguyentrav.github.io/rice-paper/

我尝试修改＃l-splash和＃overlay-filter的高度，但是没有运气。

body 
{
  max-width: 100%;
  overflow-x: hidden;
  padding: 0px;
  margin: 0px;
}


.container 
{
  display: grid;
  grid-template-columns: [content] minmax(0,1fr) [images] minmax(0,1fr);
  grid-auto-flow: dense;
}

.content, .images 
{
  display: contents;
}

#l-splash
{
  background: url("https://images.unsplash.com/photo-1526069631228-723c945bea6b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=934&q=80");
  height: 100vh; 
  width: 100%;
  position: block;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: bottom center;
}

#overlay-filter
{
  display: none;
}

@media (max-width: 767.98px)
{ 
  .container
  {
    display: grid;
    grid-template-columns: [content] 100%;
  } 

  header, .images
  {
    display: none;
  }

  #overlay-filter
  {
    position: absolute;
    display: block;
    z-index: 100;
    width: 200%;
    height: 220%;
    transform: translate(-50%,-50%);
    background: rgb(172,172,172, 0.75);
  }

}

<div class="container">
   <div class="content">

     <div id= "splash-container">

        <div id="overlay-filter"></div>

        <div id = "l-splash"></div>

     </div>

  </div>
</div>

我希望叠加层可以在任何移动设备上快速响应整个背景。

任何建议都将不胜感激！

覆盖层仅覆盖移动设备不能覆盖整个背景图像

0 个答案: