Verbesserung der wahrgenommenen Leistung mit mehreren Hintergrundbildern

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

Harry Roberts hebt dies auf, indem er einen Farbverlauf vorschlägt, der eher dem Bild ähnelt, das geladen wird

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

Will Wallace wird noch ausgefallener, indem er einen Sass @mixin erstellt, der ein großes Array von Farben nimmt, um einen komplexen Farbverlauf zu erstellen, der sogar einer verschwommenen Version des Originals ähnelt.

Siehe den Pen „Blurground“ Farbverlauffunktion von Will (@wiiiiilllllll) auf CodePen.

Ich denke immer noch, dass der coolste Weg, damit umzugehen, die „Blur Up“-Technik ist, die Emil Björklund hier behandelt hat.

Direkter Link →