css幻灯片背景加载缓慢

Question

我使用 css 为我的背景制作了一个简单的幻灯片，但是，因为我使用的是关键帧，所以我不知道如何使所有背景都使用 background-size: cover 。我希望所有图片都能正确适合屏幕。当您第一次打开网站时，图片加载时间大约需要 2 秒。（它只是显示白色，然后你就会看到图片加载）最后我还想让网站响应大小，例如使背景图片根据屏幕尺寸改变大小。如果我用普通的body {   background-image: url("picture.jpg");}然后我会使用@media，但在这种情况下我不知道什么会起作用。另外，正如你所看到的，我已经做了相当多的数字％，我试图让图片在屏幕上停留更长时间，同时使旋转动画更快。这是我的 css （我知道这是制作背景幻灯片的愚蠢方法，但它是最简单的:)）body {  background-size: cover;  animation: div 25s infinite;  height: 100vh;  margin: 0;}@keyframes div {  0% {    background-image: url("4.jpg");    opacity: 1;  }  15% {    background-image: url("4.jpg");    opacity: 1;  }  25% {    background-image: url("3.jpg");    opacity: 1;  }  35% {    background-image: url("3.jpg");    opacity: 1;  }  45% {    background-image: url("1.jpg");    opacity: 1;  }  55% {    background-image: url("1.jpg");    opacity: 1;  }  65% {    background-image: url("5.jpg");    opacity: 1;  }  75% {    background-image: url("5.jpg");    opacity: 1;  }  85% {    background-image: url("4.jpg");    opacity: 1;  }  100% {    background-image: url("4.jpg");    opacity: 1;  }}这是网站：https://student.oedu.se/~sc0007/sak/sida_1/sida_1.html

Answer 1

这个问题（一开始是白色的，后来加载图片）通常可能是由于高质量的图片而出现的。

您应该包含以下视口元素以使其响应

<meta name="viewport" content="width=device-width, initial-scale=1.0">

width=device-width部分设置页面的宽度以遵循设备的屏幕宽度

initial-scale=1.0部分设置浏览器首次加载页面时的初始缩放级别。