Repeat-y 对我不起作用。图像没有按应有的方式重复

Question

I have a simple html code below我在下面有一个简单的 html 代码

<body>
    <div class="wrapper">
        <div class="container">
            <div class="sky"></div>
            <img src="images/arcade-game.png" alt="">
        </div>
        
    </div>
</body>

and here is my CSS code这是我的 CSS 代码

.container{
    height:90vh;
    width:90vw;
    background-color: white;
    margin: auto auto;
    position: relative;
    overflow:hidden;
    
}

.sky{
    height: 100%;
    width: 100%;
    background-image: url(/images/sky.jpg);
    background-size: cover;
    background-repeat: repeat-y;
    animation: movingsky 4s linear infinite;

}

I have the animation for the .sky to move downwards, however the background isn't repeating as how I wanted it to be.我有 animation 让.sky向下移动，但是背景没有像我想要的那样重复。

Am i missing anything here?我在这里遗漏了什么吗？

Answer 1

background-size: cover; will stretch the image to fill the entire container, therefore no repetitions are visible.将拉伸图像以填充整个容器，因此看不到重复。 Either remove background-size or set it to a fixed size.删除background-size或将其设置为固定大小。

Repeat-y 对我不起作用。图像没有按应有的方式重复

问题描述

1 个解决方案

解决方案1
1 已采纳 2022-09-28 17:12:40

Repeat-y 对我不起作用。 图像没有按应有的方式重复

问题描述

1 个解决方案

解决方案1 1 已采纳 2022-09-28 17:12:40

Repeat-y 对我不起作用。图像没有按应有的方式重复

解决方案1
1 已采纳 2022-09-28 17:12:40