使用多个背景图片提升感知性能

.masthead {
  /* Might as well let this color show */
  background-color: #3d332b;
  /* As this is loading */
  background-image: url(/img/masthead.jpg);
}

Harry Roberts 通过建议使用看起来更像加载图像的渐变来提升这一水平。

.masthead {
  background-image: 
    url(/img/masthead-large.jpg),
    linear-gradient(to right, #807363 0%, #251d16 50%, #3f302b 75%, #100b09 100%);
}

Will Wallace 通过创建一个 Sass 的 @mixin，该 @mixin 接收一个大的颜色数组来生成一个复杂的渐变，使其看起来更像原始图像的模糊版本，变得更加花哨。

查看 Will (@wiiiiilllllll) 在 CodePen 上的笔 “Blurground” 渐变函数。

我仍然认为处理它的最酷方法是 Emil Björklund 在这里介绍的 “模糊向上”技术。

直接链接 →