我在启动画面上有一个背景图像,从100%缓慢扩大到200%(除了让页面有点生命之外别无他法)。它在水平屏幕上工作正常,因为它是一个水平图像,但当屏幕很窄(对于移动设备)时,顶部和底部都有白色空间,因为图像不再填充背景。如果我将背景大小更改为“覆盖”,则动画无法正常工作(它从0%放大而不是填充屏幕)。
所以我的问题是 - 如何设置初始大小以便覆盖它以便它总是填满屏幕然后慢慢扩大到200%?
body {
margin: 0;
padding: 0;
}
.background {
width: 100%;
height: 100vh;
background-image:url(Front-Cover.jpg);
background-size: 100%;
background-repeat: no-repeat;
background-position: center center;
}
.header {
width: 100%;
position: absolute;
top: 0;
left: 0;
}
.header img {
width: 100%;
height: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="header">
<img src="header.png" alt="">
</div>
<div class="background"></div>
{{1}}
答案 0 :(得分:1)
我无法让你的代码段工作。给这个css一个镜头,不需要jquery。
.background {
width:100%;
height:100%;
background-image:url(Front-Cover.jpg);
background-position: center;
background-size: cover;
animation: 5s ease example infinite;
}
@keyframes example {
0% { transform: scale(1);}
50% { transform: scale(2);}
0% { transform: scale(1);}
}
@keyframes example {
0% { -webkit-transition: scale(1);}
50% { -webkit-transition: scale(2);}
0% { -webkit-transition: scale(1);}
}
@keyframes example {
0% { -moz-transition: scale(1);}
50% { -moz-transition: scale(2);}
0% { -moz-transition: scale(1);}
}