CSS-Hintergrundbild beginnt unscharf und kommt dann in den Fokus

Question

Ich habe Hintergrundbilder mit CSS laden, aber die Bilder weiterhin verschwommen und dann nach ein paar Sekunden konzentrieren, wie kann ich dieses Problem lösen?

sah ich einige Antworten auf diese Frage, aber es mit meinem Fall hat nicht geholfen: How to prevent the background image from getting blurry

Was dies geschehen kann verursacht?

<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:

Jede Hilfe ist sehr

html geschätzt

#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

Es klingt wie Sie ein progressive compressed jpg Bild könnte mit. Diese Art der Komprimierung bewirkt, dass das Bild in mehreren Durchläufen gerendert wird, wobei jeder Durchgang die Detailebene des Bildes erhöht.

Wenn Ihr Bild in Bezug auf Auflösung und/oder Dateigröße ziemlich groß ist, kann dies zu einer bemerkenswerten Erhöhung der Bildtreue führen, die dem von Ihnen beschriebenen Ereignis entspricht. Können Sie mir sagen, was die Auflösung und Dateigröße von your-brand-here.jpg ist?

Wenn dies der Fall ist, können Sie die Ladezeit für das Bild reduzieren, indem Sie die Auflösung reduzieren (ich wandle Bilder im Allgemeinen in die exakte Auflösung um) und die Komprimierungsqualität von JPEG reduzieren.

Hoffe, das hilft!