Hintergrund Einblenden bei Laden

Ich versuche, meinen Hintergrund beim Betreten der Website einzublenden. Ich habe mehrere Methoden ausprobiert, die funktionieren. Allerdings habe ich Probleme, den Hintergrund auf unterschiedliche Auflösung zu zentrieren. Wie Sie bei der Eingabe meiner Website sehen können, ist der Hintergrund immer dann in der Mitte, wenn Sie die Größe Ihres Browsers ändern. Website: http://studi0.ml/ Das ist genau das, was ich versuche zu erreichen, aber immer noch den Globus zu jeder Zeit in der Mitte zu haben. Und mein Hintergrund ist reines CSS. Denken Sie daran, ich habe gerade angefangen Website-Design. Ich habe jetzt versucht, für 2-3 Wochen zu codieren.Hintergrund Einblenden bei Laden

html, 
 
body { 
 
    background: url(http://studi0.ml/EzJsucI.jpg) no-repeat center center fixed; 
 
    -webkit-background-size: cover; 
 
    -moz-background-size: cover; 
 
    -o-background-size: cover; 
 
    background-size: cover; 
 
    -webkit-transition: background 0.0s linear; 
 
    -moz-transition: background 0.75s 0.0s linear; 
 
    -o-transition: background 0.75s 0.0s linear; 
 
    transition: background 0.75s 0.0s linear; 
 
    -moz-backface-visibility: hidden; 
 
    -webkit-backface-visibility: hidden; 
 
    -ms-backface-visibility: hidden; 
 
    backface-visibility: hidden; 
 
}

Quelle

2016-05-07 azuz53487

Ich verstehe das Problem nicht, da der Globus auf dem Bild ist, nicht wahr? – phpheini

Ja, der Globus ist auf dem Bild. Bei einigen Codes wird die globale Größe jedoch bei jeder Änderung der Browsergröße nach rechts verschoben. Wenn Sie beispielsweise auf meine Website klicken und versuchen, die Größe Ihres Browsers zu ändern, können Sie sehen, dass sich der gesamte Hintergrund entsprechend der Browsergröße bewegt. - Tut mir leid, wenn ich nicht so gut erklären, mein Bestes zu versuchen. – azuz53487

vielleicht Screenshots von gutem und schlechtem Verhalten und das gewünschte Ergebnis in Photoshop oder etwas gemacht wird uns helfen, zu verstehen. –

würde ich eine andere Einstellung empfehlen, wenn Sie ein Hintergrundbild möchten Seite laden verblassen in auf. Sie können ein separates div in einem anderen Fluss als den Rest Ihrer Seite haben und es zu einer Deckkraft von 1 beim Laden der Seite animieren lassen.

HTML

<html> 
<head> ... </head> 
<body> 
    <div class="page-bg"></div> 
</body> 
</html>

CSS

html, body { 
    height: 100%; 
    width: 100%; 
} 

body { 
    position: relative; 
} 

.page-bg { 
    opacity: 0; 
    position: fixed; 
    top: 0; 
    left: 0; 
    height: 100%; 
    width: 100%; 
    background: url(http://studi0.ml/EzJsucI.jpg) no-repeat center center fixed; 
    background-size: cover; 

    animation-name: fadeIn; 
    animation-iteration-count: 1; 
    animation-timing-function: ease-in-out; 
    animation-duration: 1s; 
    animation-fill-mode:forwards; 
} 

@keyframes fadeIn { 
    0% { 
     opacity: 0; 
    } 
    100% { 
     opacity: 1; 
    } 
}

Natürlich müssen Sie möglicherweise polyfills für die animation und keyframes Erklärungen hinzuzufügen. (das heißt -moz-animation-name, -webkit-animation-name, etc ..)

Hier ist ein funktionierendes Beispiel auf Plunkr. Ich musste das Bild, das du benutztest, mit einem https Link austauschen, damit es kein Problem gibt, es zu laden.

Quelle

2016-05-07 16:44:58 ManBearPixel

Vielen Dank, mein Herr! Genau das habe ich gesucht! Sehr geschätzt! – azuz53487

Kein Problem Kumpel! – ManBearPixel

Eine Frage, Sir. Ich frage mich, wie kann ich die verblassene Farbe schwarz machen? Ich habe versucht, das zu tun: Hintergrund: # 000 URL (http://studio0.ml/EzJsucI.jpg) No-Repeat Center-Center behoben; - Noch keine Ergebnisse :) Danke! – azuz53487

Hintergrund Einblenden bei Laden

Antwort

Verwandte Themen