Question

我正在制作一个背景动画，其中3个图像向左滑动，当它们滑动时，它们相互淡入。链接：www.nettyneets.com

该页面是一个单页网站（调整大小到浏览器窗口，100％宽度，100vh）。

我的问题是，因为图像是100％宽度，当它向左滑动时，没有任何东西在右边，因此我需要使图像更大，以便当它滑动时，背景不是＆＃39;可见，但同时我需要保持网站100％宽度，100vh。

<div class="intro-body">
                <img class="c" src="img/img3.jpeg" />
                <img class="b" src="img/img2.jpeg" />
                <img class="a" src="img/img1.jpeg" />

        </div>

CSS

.intro .intro-body {
width:100%;
height:auto;
position:relative;
}

.intro-body img {
width:100%;
height:100vh;
position:absolute;
z-index:1; 
}

img.a {
    animation: animatedBg1 12s infinite;
    z-index: 3;
    opacity:0.5;
}
img.b {
    animation-delay: 4s!important;
    animation: animatedBg1 12s infinite;
    z-index: 2;
}
img.c {
    animation-delay: 8s!important;
    animation: animatedBg1 12s infinite;
    z-index: 1;
}

Answer 1

我不知道如果这是最好的解决方案，但你可以这样做：

.intro-body{ 
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

然后你可以设置你想要的图像尺寸，它不会超过100％width和height。

如何使图像比网站更大，使网站保持100vh

1 个答案: