溢出隐藏属性不适用于视差滚动

Question

使用视差滚动进行尝试时，溢出隐藏属性无法正常工作。

我正在尝试使用JavaScript完成视差滚动一切都应该正常工作但是当我尝试将溢出设置为隐藏时，图像仍然出现在div之外

这是HTML

<div id="page2">
       <p id="bb">The title</p> //Some title
       <div id="bg"></div> //Blue box in front of the image(design decision)
       <img src="img/Food.jpg" alt="prlx" id="prlx"/> //The image which has the proprety
</div>

这是我的JavaScript eventListener和函数：

window.addEventListener("scroll",func,false);

function func(){
      prlx_lyr_1 = document.getElementById("prlx");
      prlx_lyr_1.style.top = (window.pageYOffset/4)+"px"
}   

这是我的图像CSS，我试图隐藏溢出的部分：

#page2 img{
      position:relative;
      top:-300px;
}

这是包含图像的div的CSS

#page2{
      overflow:hidden;
      height:250px;
}

#bg

还有一些额外的CSS

更新的    这是一个

您可以注意到溢出没有隐藏，容器div是页面中的蓝色侧

这是js fiddle

Answer 1

所以问题是position: fixed将元素从文档流中分解出来，与absolute不同，它不能通过在父级上使用relative来包含。相反，您应该在background fixed上将此图片设置为div设置为position: absolute：

<强> HTML

<div id="page2">
   <p id="bb">The chef</p>
   <div id="bg"></div>
   <div id="bg-image"></div>
</div>

<强> CSS

#page2{
  overflow:hidden;
  height:250px;
  position: relative;
}

#bg{
  background: #33c1c9;
  height:250px;
  width:100%;
  position:relative;
  z-index:74897;
  opacity:0.4;
}

#bg-image{
  background: url("http://im47.gulfup.com/1Y5tcL.jpg") no-repeat fixed;
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
}

FIDDLE