html - 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这种类型的压缩会导致图像在多个 channel 中渲染，每个 channel 都会增加图像的细节水平。

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

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

希望这对您有所帮助!