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压缩质量。

希望这有帮助！

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

1 个答案: