Ich habe derzeit eine Bootstrap-Webseite mit einem farbigen Hintergrundbild. Ich möchte, dass das Bild mit Graustufen beginnt und dann nach dem Laden der Seite allmählich in Farbe übergeht (nicht schwebt).Wie mache ich Hintergrundbild von Graustufen zu Farbe bei Belastung verblassen?
Was ist der beste Weg, dies mit CSS/HTML zu tun?
Sie können dies mit CSS-Keyframe-Animationen erreichen.
Sie möchte auf die folgenden erweitern:
@keyframes greyscale-fade-in {
0% { -webkit-filter: grayscale(100%); }
100% { -webkit-filter: grayscale(0%); }
}
.image-selector {
animation: greyscale-fade-in 1s ease-in forwards;
}
Die Keyframes steuern, wie Sie das Bild wollen, wie die Seite geladen werden angepasst.
Der animation Wert muss mitgeteilt werden, welche (greyscale-fade-in) verwenden Keyframes, wie lange Sie die Animation wollen dauern (1s ist 1 Sekunde), was Zeit des Übergangs würden Sie gerne (ease-in).
Der Parameter forwards weist die Animation an, nur von 0% bis 100% zu laufen und nicht von 100% zu 0% zurückzukehren.
Die Animationsregel muss auf einen Selektor angewendet werden, der auf Ihr Bild ausgerichtet ist. Stellen Sie daher sicher, dass oder der Wrapper <div> über eine Klasse verfügt, auf die Sie zielen können.
Weitere Informationen über Animationen, sollten Sie lesen: https://developer.mozilla.org/en-US/docs/Web/CSS/animation
Das ist eine großartige Lösung! - Ich habe versucht, selbst eine Lösung zu finden, habe sie dann aber getestet und es hat super funktioniert. Eine Geige gemacht, wenn jemand neugierig ist https://jsfiddle.net/26zpq6vc/6/ aber volles Credo für Sie – HisPowerLevelIsOver9000
Vielen Dank! –
Erster Beitrag? Willkommen bei StackOverflow. Check out [mit CSS, um Farbbilder in Schwarz-Weiß zu konvertieren ...] (http://thenewcode.com/532/Convert-Images-To-Black-And-White-With-CSS) Dann sag uns, was du ' Ich habe es versucht. Tipp: JSFiddle ist wirklich das beste Werkzeug, um ein kleines Stück Code anzuzeigen. Einfach für jemanden, der Ihnen hilft ... – zipzit
Sie können das nicht mit einem Hintergrundbild in CSS machen. –
@Paulie_D Was ist ein Hintergrund, Bild, wirklich? Okay, wir haben ein Div mit einem Bild und einen niedrigen Z-Index. Geht das so für dich? – zipzit