CSS 背景图像开始模糊然后成为焦点

Question

我正在使用 CSS 加载背景图像，但图像继续模糊并在几秒钟后聚焦，我该如何解决这个问题？

我在这个问题上看到了一些答案，但对我的情况没有帮助：How to prevent the background image from getting blurry

发生这种情况的原因是什么？

非常感谢任何帮助

html:

<div class="first-row-container">
  <div id="one-box" class="first-row-styles animation-target"></div>
  <div class="divider"></div>
  <div id="two-box" class="first-row-styles animation-target"></div>
  <div class="divider"></div>
  <div id="three-box" class="first-row-styles animation-target"></div>
  <div class="divider"></div>
  <div id="four-box" class="first-row-styles animation-target"></div>
<div>

css:

#one-box {
  background-image: url("your-brand-here.jpg");
  background-size: 100% 100%;
  image-rendering: -webkit-optimize-contrast;
  border-style: solid;
  border-width: 2px;
  border-color: #7f8c8d;
}

.first-row-container {
  margin-left: 13%;
}

Answer 1

听起来您可能正在使用progressive compressed jpg 图像。这种类型的压缩会导致图像在多次传递中被渲染，每次传递都会增加图像的细节级别。

当您的图像非常大时，就分辨率和/或文件大小而言，这可能会导致图像保真度显着提高，这与您所描述的事件相对应。你能告诉我your-brand-here.jpg的分辨率和文件大小是多少吗？

如果是这种情况，您可以通过降低分辨率（我通常将图像转换为它们将显示的确切分辨率）和降低 jpeg 压缩质量来减少图像的加载时间。

希望这会有所帮助！