Improving Perceived Performance with Multiple Background Images

利用Using CSS multiple backgrounds 步骤:

• 使用PS获取模糊颜色

  • 打开图片
  • 将图片分区
  • 滤镜->模糊->平均

• 设置背景图片为:

  .sample {
        /*略去其他设置*/
        background-image: url(https://ooo.0o0.ooo/2016/11/12/5826865399519.jpg),
                      linear-gradient(to bottom, #b9888c 34%, #bbcad5 77%, #b3a493 100%);
  }
  

  大功告成，此时网速慢的用户访问时，屏幕上会显示为:

思考与改进:

• The “Blur Up” Technique for Loading Background Images

• Improving "Improving Perceived Performance with Multiple Background Images" with multiple background images

• 或许也可以结合progressive JPEG(渐进式JPRG)?