0

我在 Heroku 上托管了由 11ty 生成的静态站点。一切都很好，但有一件事 - 背景图片不t loaded properly, as I said in the title, it twitches. The image is downloaded, I don使用链接。图像大小为 895,4 kB。有人可以帮我解决吗？这是我的代码：

<!DOCTYPE html>
<html>

<head>
    {% block title %}
        <title>HTML && CSS tutorial</title>
    {% endblock %}
        <link rel="stylesheet" href="{{ base_styles_path }}">
    {% block head %}
    {% endblock %}
</head>

<body>
    <div class="parent">
        <img class="bg" src="{{ background_path }}">
        <div class="container">
            <div class="top-nav">
                <a href="/">HOME</a>
                <a href="/lists/html">HTML</a>
                <a href="/lists/css">CSS</a>
                <a href="/next">NEXT STEPS</a>
            </div>
        </div>
    </div>
    <div class="content">
        {% block content %}
        {% endblock %}
    </div>
</body>
</html>

和 {{ base_styles_path }} 样式：

/* Background image styles */
.bg {
  min-height: 100%;
  min-width: 1024px;
  width: 100%;
  height: auto;
  position: fixed;
  filter: blur(6px);
  -webkit-filter: blur(6px);
  top: 0;
  left: 0;
  transform: scale(1.015);
  z-index: -1;
}

UPD：图像压缩没有帮助

4

1 回答 1

0

这可能是您如何托管文件的问题 - Heroku 有时无法缓存图像，或者需要一秒钟才能从冷加载。

最有可能的是图像大小 - 0.8MB 相当大，在较慢的连接上加载可能需要一秒钟。由于无论如何您都在模糊图像，因此您可以将该图像压缩到一个很小的尺寸，而没有明显的视觉差异。

于 2020-08-24T13:47:34.640 回答