Hintergrund Bild langsam vergrößern

Ich Suche schon überall herum, aber ich kann nicht scheinen zu finden, eine definitive Antwort, wie man das hintergrund Bild langsam vergrößern mit CSS. Hilfe würde geschätzt. Mein code bisher zoomt die text-Elemente, aber nicht der hintergrund.

CSS:

body {
    background-image: url("../img/background.jpg");
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-size:cover;
    background-position:center-top;
    background-position-x: 50%;
    background-position-y: 0%;
    -webkit-animation: zoomin 5s 1;
}

@-webkit-keyframes zoomin {
    0% {
        -webkit-transform: scale(1);
    }
    100% {
        -webkit-transform: scale(2);
    }

}
InformationsquelleAutor Darkstar | 2015-06-06
  1. 2

    War ich nicht in der Lage, um den Körper zu skalieren wie gewünscht, meine Vermutung ist, dass das Benutzer-stylesheet zu überschreiben, es aus irgendeinem Grund. Jedoch, wie eine Problemumgehung, die Sie verwenden könnte, eine innere div-etwa so:

    HTML:

    <style>
div {
    background-image: url("http://upload.wikimedia.org/wikipedia/commons/4/4e/Pleiades_large.jpg");
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-size:cover;
    background-position:center-top;
    background-position-x: 50%;
    background-position-y: 0%;
    -webkit-animation: zoomin 5s 1;
}

@-webkit-keyframes zoomin {
    0% {
        -webkit-transform: scale(1);
    }
    100% {
        -webkit-transform: scale(2);
    }

}
</style>
<body>
	<div style="position:absolute;top:0;bottom:0;left:0;right:0;"></div>
</body>

    • Ausflug, das ging, aber die Bildqualität scheint zu gehen, wie es skaliert im langsam.
    • Okay, versuchen verschiedene Bild-rendering-Eigenschaften. Eine Erklärung dafür kann sein gefunden an dieser link
    InformationsquelleAutor jaunt
  2. 0

    Hier ist ein einfaches Beispiel:

    Beispiel

    Wir im Grunde einfach-transform: scale; und auslösen der änderung durch hinzufügen einer Klasse mit jQuery auf ein Ereignis (ich wählte, um auszulösen, sobald das DOM geladen).

    HTML:

    <main id="kb">
    <img src="https://iso.500px.com/wp-content/uploads/2014/08/2048-5.jpg" alt="baby elephants" />
</main>

    CSS:

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

#kb {
    width:100%;
    height:100%;
    position:relative;
}

#kb img {
    transform-origin: 20% 80%;
    transition: transform 70s linear;
    position:absolute;
    top:50%;
    left:50%;
    margin-left:-1024px;
    margin-top:-703px;
}
#kb img.zoom {
    transform: scale(2);
}

    JS:

    $(document).ready(function(){
    $('#kb > img').addClass('zoom');
});

    Wenn Sie möchten, zu erhöhen oder verringern Sie die Geschwindigkeit, ändern Sie einfach den Wert von "transition" in der CSS.

    • Sieht aus wie Sie überschrieb Ihr Beispiel, oder die Verbindung ist schlecht. So oder so, es gibt keine demo gibt.
    InformationsquelleAutor HelloWorld
Schreibe einen Kommentar