overflow：hidden意外作用

web中插入背景图片

html,body {
    height: 100%;
    width: 100%;
    margin: 0;
  }
* {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

#page1 {
    background: url('C:/Users/123/Desktop/beautiful/page1.png');
    width: 100%;
    height: 990px;
    z-index: -2;
    margin: 0;

}

#shadow {
    background-color: #141414;
    opacity: 0.65;
    z-index: -1;
    width: 100%;
    height: 990px;
    margin: 0;
    overflow: hidden;
}

显示出的结果

捕获1.PNG

html,body {
    height: 100%;
    width: 100%;
    margin: 0;
  }
* {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

#page1 {
    background: url('C:/Users/123/Desktop/beautiful/page1.png');
    width: 100%;
    height: 990px;
    z-index: -2;
    margin: 0;

}

#shadow {
    background-color: #141414;
    opacity: 0.65;
    z-index: -1;
    width: 100%;
    height: 990px;
    margin: 0;
    
}

显示的结果则是：

捕获2.PNG

这两个css区别是有没有

 overflow: hidden;

至于为什么呢？
我看到有的地方写的是插入图片时会撑开父元素几像素，我存着一点疑虑。。。