为什么图像不垂直拉伸

why image not stretching verticlly

我写了下面的代码,但我无法理解为什么我设置为背景的图像没有垂直拉伸以覆盖整个页面。 我会很感激你的帮助

html{
    height: 100%;
    overflow-y: scroll;
}
html:after{
    margin-bottom:0;
    content : "";
    background: url("../images/van1.jpg") no-repeat center center;
    background-size:cover;
    width: 100vw;
    height: 100vh;
    position: absolute;
    overflow: hidden;
    top: 0;
    left: 0;
    opacity: 0.5;
    filter: alpha(opacity=50);
    z-index: -1;
}`

使用 html:after 就像在 <body> 标签旁边的 <html> 内添加一个子项,它是无效的,浏览器可能无法正确呈现它,最好使用 body:after并设置 height: 100% 使其覆盖您的页面。